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本 书 共 分 为 10 章 ,循序渐进 地 介绍 了 Web 系统 与 技术 的 基础 知识 .HTML 网 页 设计 基础 .CSS 样式 
设计 、 网 页 数据 的 有 效 性 验证 ,JavaScript 编程 技术 等 Web 前 台 系 统 与 技术 ,以 及 HTML DOM 对 象 编程 、 
PHP 编程 .ASP 编程 XML 编程 和 Ajax 编程 等 后 台 系 统 与 技术 。 
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算 机 类 和 信息 类 专业 的 “Web 系统 与 技术 ”课程 的 教材 。 本 书 每 章 都 安排 了 大 量 例题 ,每 个 例题 都 有 详细 的 
步骤 ,具有 应 用 型 工程 技术 教材 的 特点 ,读者 可 以 由 浅 和 人 深 地 全 面 掌 握 Web 系统 与 技术 的 各 个 知识 点 。 

为 了 方便 教师 授课 和 读者 自学 ,本 书 配 有 符合 国际 工程 教育 认证 要 求 的 “Web 系统 与 技术 ”教学 大 纲 , 全 部 
章节 的 PPT. 实 例 的 源 程序 和 习题 的 参考 管 案 , 可 到 清华 大 学 出 版 社 的 网 站 (网 址 : www. tup. com. cn) 下 载 。 

本 书 可 以 作为 大 学 本 科 生 和 研究 生计 算 机 类 和 信息 类 专业 的 教材 ,也 可 以 作为 Web 系统 与 技术 初学 
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随 着 经 济 的 发 展 ,德国 提出 了 以 智能 制造 为 主导 的 第 四 次 工业 革命 一 一 “工业 4.0”, 日 
本 提出 了 “产业 复兴 计划 ”, 法 国 提出 了 “新 工业 法 国 ”。 我 国 也 提出 了 “产业 结构 的 转型 升 
级 ”一 一 中 国 制造 2025” 等 国家 重大 战略 ,对 工程 教育 提出 了 新 的 更 高 的 要 求 ,国际 化 人 才 
竞争 越 来 越 激 烈 ,培育 符合 国际 标准 的 工程 技术 人 才 势 在 必 行 。 

随 着 我 国 高 等 教育 进入 大 众 化 阶段 ,培养 应 用 型 本 科 人 才 成 为 国家 发 展 战略 。 应 用 型 
本 科教 育 以 应 用 型 为 办 学 定位 ,对 于 满足 中 国 经 济 社会 发 展 的 高 层次 应 用 型 人 才 需 要 以 及 
推进 中 国 高 等 教育 大 众 化 进程 起 到 了 积极 的 促进 作用 。2014 年 3 月 ,中 国教 育 部 改革 方向 
已 经 明确 : 全 国 普通 本 科 高 等 院 校 1200 所 学 校 中 ,600 多 所 逐步 向 应 用 技术 型 大 学 转变 。 

工程 教育 专业 认证 为 我 国 应 用 技术 型 大 学 的 工程 类 专业 教学 改革 指明 了 方向 。 工 程 教 
育 专 业 认 证 是 我 国 工程 型 人 才 走 向 国际 市 场 的 准 入 证 ,促进 工程 教育 面向 世界 。2016 年 
6 月 2 日 ,在 马来西亚 吉隆 坡 举行 的 国际 工程 联盟 大 会 上 .我 国 成 为 (华盛顿 协议 ) 第 18 个 正 
式 成 员 , 这 是 我 国 高 等 教育 发 展 的 一 个 里 程 碑 。 工 程 教育 专业 认证 可 以 构建 中 国 工程 教育 
的 质量 监控 体系 ,推进 中 国 工程 教育 改革 ,进一步 提高 工程 教育 质量 ,有 助 于 构建 工程 教育 
与 企业 界 的 联系 机 制 。2006 一 2015 年 ,全 国 累计 有 124 所 高 校 的 570 个 工程 专业 参加 了 认 
证 , 仅 2016 年 大 约 有 200 个 专业 参加 认证 。 

计算 机 专业 作为 我 国 工程 教育 的 主力 军 之 一 ,需要 培养 能 解决 复杂 计算 机 工程 问题 的 
人 才 , 必 须 加 快 教学 模式 改革 ,以 适应 国家 的 战略 需求 。 高 校 计算 机 专业 教育 肩负 着 为 国家 
培养 信息 工程 科技 人 才 的 使 命 。 目 前 我 国 计 算 机 类 专业 的 布点 总 数 已 达 2481 ,每 年 毕业 生 
人 数 为 18 万 左右 ,为 国家 建设 培养 了 大 批 计算 机 类 专业 的 应 用 型 人 才 。 

“Web 系统 与 技术 ?是 计算 机 科学 与 技术 .软件 工程 .网 络 工程 、 物 联网 、 信 息 类 等 专业 
的 必修 或 选修 课 。 通 过 课程 教学 ,应 使 学 生 对 各 类 Web 开发 技术 及 其 应 用 发 展 趋势 有 一 个 
全 面 的 认识 和 把 握 。 通 过 掌握 Web 网 站 构建 技术 和 Web 编程 的 基本 技能 ,加 深 对 信息 系 
统 的 理解 ,提高 学 生 基于 Web 的 信息 系统 设计 开发 的 综合 能 力 。 

在 此 背景 下 ,计算 机 类 和 信息 类 专业 需要 适合 应 用 型 的 “Web 系统 与 技术 ”教材 ,特别 
需要 符合 工程 教育 专业 认证 核心 理念 的 教材 ,以 培养 学 生 解 决 复杂 Web 系统 与 工程 问题 的 
能 力 。 

“Web 系统 与 技术 ”课程 包括 Web 前 端 和 后 台 页 面 的 相关 技术 ,所 有 的 页 面 都 涉及 网 
页 数据 内 容 、 格 式 处 理 和 交互 性 等 处 理 , 其 中 网 页 数据 内 容 的 具体 技术 包括 DOM、HTML 
和 XML 等 模块 ,网 页 数据 的 格式 化 处 理 包 括 CSS 等 模块 ,交互 性 的 具体 技术 包括 
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JavaScript、Ajax、JQuery 等 模块 ,而 后 台 服 务 器 主要 包括 PHP、JSP、ASP 等 相关 模块 , 具 
体内 容 和 关系 如 图 1 所 示 。 
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图 1 Web 系统 与 技术 的 学 习 内 容 图 


“Web 系统 与 技术 ”课程 的 传统 教学 过 程 中 ,存在 一 听 就 会 .一 看 就 懂 、 一 做 就 不 会 、 
过 就 忘 的 浅 层 学 习 问 题 ,是 一 种 低 水 平 的 认 知 活动 。 浅 层 学 习 拘 泥 于 文本 的 字面 理解 ,满足 
于 知识 的 机 械 记 忆 , 把 学 习 简 化 为 阅读 ,把 思考 简化 为 寻找 。“Web 系统 与 技术 ”课程 的 知 
识 点 很 多 ,简单 记忆 Web 的 对 象 .属性 、 事 件 和 方法 ,难以 系统 化 掌握 。 传 统 教学 模式 的 理 
念 * 以 教师 为 中 心 " 忽 视 了 学 生 的 学 习 主 体 作用 ,通常 采用 集体 、 满 堂 灌 的 讲授 式 教 学 ,教师 
负责 控制 和 管理 学 习 活 动 。 而 工程 教育 专业 认证 的 指导 思想 是 “以 学 生 为 中 心 ,基于 产 出 的 
教育 和 持续 改进 ”。“ 以 学 生 为 中 心 ” 的 观念 反对 在 教学 中 以 教师 为 中 心 ,反对 在 课堂 中 采用 
填 鸭 式 ,灌输 式 教学 活动 ,主张 以 学 生 为 中 心 组 织 教学 ,发 挥 学 生 学 习 主 体 的 主观 能 动作 用 ， 
提倡 “做 中 学 ”。 

“互联 网 十 ?教育 时 代 的 来 临 ,为 传统 教学 模式 提供 了 新 的 发 展 思路 ,改变 了 学 生 被 动 接 
受 知识 的 状况 。“ 互 联网 十 "教学 模式 形成 了 以 “ 微 课 ” 提 供 教 学 资源 、 大 规模 网 络 公 开课 
(Massive Open Online Course，MOOC) 和 小 规模 专属 在 线 课 程 (Small Private Online 
Course,SPOC) 提 供 新 的 教学 平台 、 翻 转 课堂 (Flipped Classroom) 创 新 教学 方法 ,形成 了 以 
学 生 为 中 心 的 教学 模式 ,更 好 地 满足 了 个 性 化 学 习 的 要 求 , 提 高 了 教学 资源 的 共享 ,也 提高 
了 教学 质量 。 

现代 心理 学 认为 一 切 思维 都 是 从 问题 开始 的 ,教学 要 促进 学 生 思维 ,就 应 培养 学 生 的 问 
题 意 识 ,成 功 地 使 学 生产 生 问题 的 教学 ,才能 真正 调动 学 生 的 积极 性 。 研 究 性 学 (Inquiry 
Learning) 是 一 种 积极 的 学 习 过 程 , 学 生 在 此 课 中 自己 探索 问题 的 学 习 方式 .“Web 系统 与 
技术 ?课程 涉及 的 具体 技术 非常 多 ,知识 点 也 很 多 , 理 顺 这 些 知识 点 的 关系 成 为 学 习 好 此 门 
课程 的 关键 。 按 照 上 述 学 习 内 容 图 ,以 问题 为 载体 ,以 解决 问题 为 动力 。“Web 系统 与 技 
术 ” 课 程 的 教学 可 以 采用 问题 驱动 教学 法 , 改变 原 有 的 “ 先 理论 后 实践 "模式 , 在 每 个 模块 
引入 问题 案例 , 采用 明确 的 问题 驱动 法 。 问 题 不 仅 由 老师 来 提 , 更 应 该 由 学 生 在 回答 每 个 
模块 的 基本 问题 过 程 中 提出 更 多 的 新 闻 题 。 以 HTML 为 例 , 可 以 列 出 以 下 几 个 问题 。 

问题 1: HTML 文档 的 结构 由 哪些 部 分 构成 ? 

问题 2: 如 何 实现 Web 文本 的 字体 .颜色 .背景 ,对 齐 方式 换行 .水平线 .空白 字符 和 特 
殊 字 符 等 的 格式 编辑 ? 

问题 3: 如 何 实现 列表 的 数据 和 格式 编辑 ? 

问题 4: 如 何 实现 表格 的 表 头 、` 行 、 列 .单元 格 、 对齐 方式 ? 











问题 5: 如 何 实现 表单 控件 .数据 和 文件 处 理 ? 

问题 6: 如 何 实现 图 片 、 声 音 和 视频 等 多 媒体 的 显示 处 理 ? 

每 个 模块 设置 有 5 一 6 个 大 问题 ,每 个 大 问题 设置 了 2 一 3 个 小 问题 ,让 学 生 通 过 自己 或 
分 组 收集 、 分 析 和 处 理 信 息 来 实际 感受 和 体验 知识 的 产生 过 程 。 


学 生 进 行 深度 学 习 。 深 度 学 习 , 即 在 理解 的 基础 上 学 习 , 学 习 主 体能 够 批判 性 地 学 习 新 知 
识 、 新 理论 ,学 习 的 感受 ,感知 与 感悟 有 机 地 融入 自己 原 有 的 认 知 结构 中 ,进而 提升 学 习 层 
次 ,强化 学 习 能 力 ,去 适应 新 情境 探究 新 问题 ,培养 新 的 综合 学 习 能 力 。 以 Web 服务 模块 
为 例 ,深度 学 习 不 仅仅 局 限于 如 何 实现 的 技术 细节 , 更 要 讨论 软件 开发 的 代码 复 用 ,到 软件 
设计 复 用 的 思想 上 ,软件 架构 的 高 度 : 软件 复 用 一 直 是 软件 技术 发 展 的 重要 动力 。 从 面向 
过 程 到 面向 对 象 编程 ,追求 软件 源 代码 层次 上 的 复 用 ; 从 面向 组 件 到 面向 消息 编程 ,追求 运 
行 时 代码 层次 上 的 复 用 ; 从 面向 设计 模式 的 软件 工程 到 面向 软件 体系 架构 的 软件 工程 , 则 
追求 软件 设计 思想 上 的 复 用 。 指 导 教 师 的 工作 重点 应 引导 学 生理 解 Web 服务 模块 如 何 体 
现 上 述 3 个 层次 的 复 用 。 

“Web 系统 与 技术 ”的 课程 教学 可 以 遵循 以 学 生 为 中 心 、 产 出 为 导向 的 教学 方法 。 学 生 
在 收集 、 制 作 和 汇报 的 实践 中 提高 自主 学 习 的 能 力 , 获 得 Web 系统 与 技术 的 动手 能 力 和 演 
说 能 力 。 学 生 在 提出 问题 和 解决 问题 的 全 过 程 中 学 习 文 献 法 、 调 研 法 、 归 纳 法 等 自主 研究 和 
学 习 的 科学 方法 ,获得 关于 Web 系统 与 技术 的 多 方面 体验 和 相关 科学 文化 知识 。 教 师 在 指 
导 学 生 的 项 目 选 题 、 方 案 设 计 和 修订 、 项 目 实 施 和 部 署 、 成 果 汇 报 和 展示 中 ,实践 和 探索 “以 
实践 为 推动 力 ” 的 教学 改革 ,以 及 学 生 自 主 研究 性 学 习 “Web 系统 与 技术 ”课程 的 教学 形式 
和 教学 方法 。 

本 书 的 软件 技术 和 环境 包括 Windows 7d 等 操作 系统 ,SQL Server 2008、Access 2013、 
Excel 2013 和 MySQL 5. 5 等 数据 库 , Microsoft Visual Studio 2013(VS 2013) .PHP 5. 3 和 
Netbeans IDE 8 等 开发 语言 和 工具 ,IIS7 和 Apache 2.2 等 Web 服务 器 。 

为 了 方便 教师 授课 和 读者 自学 ,本 书 配 有 符合 国际 工程 教育 认证 要 求 的 “Web 系统 与 
技术 ”教学 大 纲 、 全 部 章节 的 PPT、 实 例 的 源 程序 和 习题 的 参考 答案 。 需 要 教学 资料 和 教学 
探讨 的 读者 可 以 到 清华 大 学 出 版 社 的 网 站 (网 址 : www. tup. com. cn) 下 载 ,也 可 以 通过 E- 
mail 与 作者 联系 : xiech@aliyun. com。 

笔者 自 2014 年 开始 酝酿 和 准备 编写 本 书 , 通 过 3 年 时 间 对 此 课程 教学 内 容 的 优化 和 实 
践 ,最 终 完成 了 书稿 。 在 本 书 的 编写 过 程 中 ,得 到 江苏 大 学 副 校 长 宋 余 庆 教 授 和 朱玉 全 教 
授 、 常 熟 理工 学 院 计 算 机 科学 与 工程 学 院 院 长 歼 声 蓉 教 授 和 常 晋 义 教授 等 人 的 热情 关心 和 
支持 。 参 与 本 书 编写 的 有 谢 从 华 、 高 蕴 梅 和 黄 晓 华 ( 参 与 了 第 1 章 和 第 2 章 的 编写 ) , 谢 从 华 
副教授 对 本 书 进 行 了 统 稿 和 编排 。 在 此 ,也 对 参考 文献 的 作者 和 网 络 资源 的 作者 表示 感谢 ， 
同时 感谢 清华 大 学 出 版 社 对 本 书 的 出 版 给 予 的 支持 和 帮助 。 另 外 ,感谢 家 人 对 我 编写 本 书 
的 支持 和 付出 ,希望 他 们 都 身体 健康 、 快 乐 幸福 ,儿子 滔滔 快乐 成 长 。 
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Web 系统 与 技术 的 基础 知识 


1.1 Internet 介绍 


1.1.1 Internet 含义 


国际 互联 网 (Internet), 又 称 因特网 ,于 1969 年 诞生 于 美国 ,是 由 美国 的 ARPA 
(Advanced Research Projects Agency) 网 发 展演 变 而 来 的 全 球 最 大 的 一 个 电子 计算 机 互联 
网 。 经 过 几 十 年 的 发 展 ,因特网 已 经 成 为 现实 生活 中 不 可 缺少 的 一 部 分 。 它 为 用 户 提供 了 
丰富 的 网 络 服务 ,包括 万 维 网 (World Wide Web, WWW) 信 息 、 即 时 通信 、 电 子 邮 件 、 文 件 传 
输 、 远 程 登录 、BBS、 电 子 游戏 等 服务 。 人 们 可 以 通过 Web 客户 端 (常用 浏览 器 ) 访 问 浏览 
Web 服务 器 上 的 页 面 ,查找 资料 ,浏览 新 闻 、 欣 赏 音乐 、 观 看 视频 ,还 可 以 进行 网 上 购物 、 网 
上 银行 交易 等 。 

随 着 因特网 的 快速 发 展 ,大 量 的 局 域 网 和 个 人 计算 机 用 户 接 入 因特网 ,任何 需要 使 用 因 
特 网 的 计算 机 都 可 以 通过 某 种 接 人 技术 与 因特网 连接 。 因 特 网 接 和 人 技术 的 发 展 非常 迅速 ， 
带宽 由 最 初 的 几 十 kb/s 发 展 到 目前 的 几 百 Mb/s 甚至 1Gb/s 以 上 。 接 人 方式 也 由 过 去 单 
一 的 电话 拨号 方式 ,发 展 成 现在 的 有 线 和 无 线 接 入 方式 。 常 见 的 宽带 接 入 方式 有 非 对 称 数 
字 用 户 线 (Asymmetric Digital Subscriber Line, ADSL) 接 入 、 有 线 电 视 网 接 入 、 光 纤 接 入 无 
线 接 入 等 。 

同时 , 随 着 网 络 和 硬件 设施 的 更 新 换代 ,网 络 应 用 技术 也 朝 着 更 多 样 、 更 复杂 的 方向 发 
展 ,可 以 概括 为 : Web 技术 、 搜 索 技术 、 网 络 安 全 技术 数据库 技术 传输 技 术 、 流 媒体 技术 、 
电子 商务 应 用 相关 技术 等 。Web 技术 是 最 常用 的 网 络 应 用 技术 , 它 是 用 户 向 服务 器 提交 请 
求 ,并 获得 网 页 页 面 的 技术 总 称 。 这 一 技术 可 以 分 为 3 个 发 展 阶段 , 即 Web 1.0、Web 2.0、 
Web 3.0。 

Web 1.0 属于 静态 应 用 ,例如 获取 HTML 页 面 , 或 用 户 登 录 ,查询 数据 库 、 提 交 数 据 等 
与 网 络 服务 器 进行 简单 的 交互 。 

Web 2.0 更 强调 用 户 与 网 络 服务 器 之 间 的 交互 性 。 事 实 上 ,Web 2. 0 并 不 是 一 个 技术 
标准 ,可 能 使 用 已 有 的 成 熟 技 术 , 也 可 能 使 用 最 新 的 技术 ,但 必须 彰显 交互 概念 。 

Web 3.0 只 是 由 业内 人 员 制 造 出 来 的 概念 词语 ,最 常见 的 解释 是 ,网 站 内 的 信息 可 以 直 
接 和 其 他 网 站 相关 信息 交互 ,能 通过 第 三 方 信息 平台 同时 对 多 家 网 站 的 信息 进行 整合 使 用 。 
用 户 在 互联 网 上 拥有 自己 的 数据 ,并 能 在 不 同 网 站 上 使 用 。 完 全 基于 Web, 用 浏览 器 即 可 
实现 复杂 系统 程序 才能 实现 的 系统 功能 。 用 户 数据 审计 后 ,同步 于 网 络 数据 。Web 3. 0 不 
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仅仅 是 一 种 技术 上 的 革新 ,而 是 以 统一 的 通信 协议 ,通过 更 加 简洁 的 方式 为 用 户 提供 更 为 个 
性 化 的 互联 网 信息 资讯 定制 的 一 种 技术 整合 。Web 3. 0 将 会 是 互联 网 发 展 中 由 技术 创新 走 
向 用 户 理念 创新 的 关键 一 步 。 


1.1.2 TCP/IP 


TCP/IP(Transmission Control Protocol/Internet Protocol) 定 义 了 电子 设备 如 何 连 入 
因特网 ,以 及 数据 如 何在 它们 之 间 传 输 的 标准 。 它 是 Internet 最 基本 的 协议 ,由 很 多 协议 
组 成 。 

TCP/IP 分 成 4 个 层次 : 网 络 接口 层 、 网 络 互 连 层 、 传 输 层 和 应 用 层 。 每 一 层 都 包含 了 
若干 协议 ,其 中 传输 层 的 TCP 和 网 络 互 连 层 的 IP 是 最 基本 、 最 重要 的 两 个 协议 。IP 是 为 
计算 机 网 络 相互 连接 进行 通信 而 设计 的 ,TCP 则 是 负责 可 靠 地 完成 数据 从 发 送 计算 机 到 接 
收 计算 机 的 传输 。 因 此 ,通常 用 TCP/IP 来 代表 整个 协议 系列 。 

在 分 层 模 型 中 ,位 于 应 用 层 的 协议 较 多 ,包括 HTTP(Hypertext Transfer Protocol) 、 
FTP(File Transfer Protocol) .SMTP(Simple Mail Transfer Protocol) 等 。HTTP 是 超 文本 
传输 协议 ,用 于 实现 因特网 中 的 WWW 服务 ,例如 ,用 户 之 所 以 在 浏览 器 中 输入 百度 网 址 
时 ,能 看 见 百度 网 页 ,就 是 因为 用 户 浏览 器 和 百度 服务 器 之 间 使 用 了 HTTP 在 交流 。FTP 
是 文件 传输 协议 ,通过 FTP 可 以 实现 共享 文件 .上 传 和 下 载 等 功能 。SMTP 是 简单 邮件 传 
输 协议 ,用 于 控制 信件 的 发 送 和 中 转 。 

因特网 上 的 每 台 主机 都 要 有 了 唯一 的 IP 地 址 ,才能 正常 通信 。IP 地 址 是 IP 提供 的 一 种 
统一 的 地 址 格式 , 它 为 因特网 上 的 每 一 个 网 络 和 每 一 台 主 机 分 配 一 个 逻辑 地 址 ,以 此 来 屏 项 
物理 地 址 的 差异 。 常 见 的 IP 地 址 分 为 IP 第 4 版 (IPv4) 和 1IP 第 6 版 (IPv6) 两 类 。IPv4 规 
定 , 每 个 IP 地 址 使 用 4 个 字 节 (32 个 二 进 制 位 ) 表 示 ,通常 用 "点 分 十 进 制 ? 表 示 成 “a. b. c. 
d” 的 形式 ,其 中 ,a、b、c、d 都 是 0~~255 的 十 进 制 整数 。 例 如 ,点 分 十 进 制 IP 地 址 101. 16. 8. 
8, 实 际 上 是 32 位 二 进 制 数 01100101. 00010000. 00001000. 00001000。 


1.1.3 域名 


IP 地 址 不 容易 记忆 ,可 以 使 用 域名 (Domain Name) 这 种 字符 型 标识 。 域 名 是 由 一 串 用 
点 分 隔 的 名 字 组 成 的 因特网 上 某 一 台 计 算 机 或 计算 机 组 的 名 称 , 用 于 在 数据 传输 时 标识 计 
算 机 的 电子 方位 。 将 域名 和 IP 地 址 对 应 以 后 , 当 用 户 访 问 网 络 中 的 某 个 主机 时 ,只 需 按 域 
名 访问 ,而 无 须 关 心 它 的 IP 地 址 ,这 就 需要 DNS 服务 器 来 完成 域名 解析 。 域 名 解析 ,就 是 
将 域名 转换 为 IP 地 址 的 过 程 。DNS(Domain Name System, 域 名 系统 ) 是 因特网 上 作为 域 
名 和 IP 地 址 相互 映射 的 一 个 分 布 式 数据 库 , 能 够 使 用 户 更 方便 地 访问 因特网 ,而 不 用 去 记 
住 能 够 被 机 器 直接 读 取 的 IP 数 串 。 

例如 ,www. yourdomain. com 作为 一 个 域名 ,和 IP 地 址 210. 155. 32. 101 相对 应 。 用 
户 访 问 www. yourdomain. com, 通 过 DNS 服务 器 完成 域名 解析 .用户 实际 访问 的 是 IP 地 
址 210. 155. 32. 101。 域 名 不 仅 便于 记忆 ,而 且 即 使 在 IP 地 址 发 生变 化 的 情况 下 ,通过 改变 
解析 对 应 关系 ,域名 仍 可 保持 不 变 。 

域名 可 分 为 不 同 级 别 , 包 括 顶 级 域名 、 二 级 域名 .三 级 域名 等 。 在 域名 中 ,大 小 写 是 没有 
区 分 的 。 域 名 一 般 不 能 超过 5 级 ,从 左 到 右 域 的 级 别 递增 ,高 级 别 的 域名 包含 低级 别 的 域 
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名 。 域 名 在 整个 因特网 中 是 唯一 的 , 当 高 级 子 域名 相同 时 ,低级 子 域名 不 允许 重复 。 一 台 服 
务 器 只 能 有 一 个 IP 地 址 ,但 是 却 可 以 有 多 个 域名 。 

顶级 域名 可 分 为 通用 顶级 域名 (如 . com.、. net\. org)、 国 家 地 区 代码 顶级 域名 (如 . cn、 
.hk)。 cn 代表 中 国 , 以 . cn 结尾 即 中国 域 名 ,适用 于 国内 各 机 构 、 企 业 等 , 常 称 为 英文 国内 
顶级 域名 。 

二 级 域名 是 指 顶 级 域名 之 下 的 域名 。 在 国际 项 级 域名 下 , 它 是 指 注册 者 的 网 上 名 称 ,例如 
microsoft、yahoo 等 ; 在 国家 顶级 域名 下 , 它 表 示 注 册 者 类 别 的 符号 ,例如 com、edu、gov 等 。 

三 级 域名 是 最 靠近 二 级 域名 左 侧 的 字段 ,从 右 向 左 依次 有 四 级 域名 、 五 级 域名 等 。 例 
如 ,常熟 理工 学 院 的 网 站 域名 www. cslg. edu. cn, 其 中 . cn 为 国家 地 区 代码 顶级 域名 ,代表 
中 国 ; edu 为 二 级 域名 ,代表 教育 机 构 ; cslg 为 三 级 域名 ,代表 常熟 理工 学 院 。 


1.1.4 URL 


统一 资源 定位 符 (Uniform Resource Locator, URL), 也 被 称 为 网 页 地 址 或 网 址 ,如 同 
在 网 络 上 的 门牌 ,是 因特网 上 标准 资源 的 地 址 。 它 最 初 由 Tim Berners-Lee 发 明 用 来 作为 
万 维 网 的 地 址 ,现在 它 已 经 被 万 维 网 联盟 编制 为 因特网 标准 RFC 1738。 

在 因特网 的 历史 上 ,统一 资源 定位 符 的 发 明 是 一 个 非常 基础 的 步骤 。 统 一 资源 定位 符 
的 语法 是 可 扩展 的 ,使 用 ASCII(American Standard Code for Information Interchange) 代 
码 的 一 部 分 来 表示 因特网 的 地 址 。 统 一 资源 定位 符 的 开始 ,一 般 会 标示 着 一 个 计算 机 网 络 
所 使 用 的 网 络 协议 。 统 一 资源 定位 符 是 对 可 以 从 因特网 上 得 到 的 资源 的 位 置 和 访问 方法 的 
一 种 简洁 的 表示 。 因 特 网 上 的 每 个 文件 都 有 一 个 唯一 的 URL, 它 包含 的 信息 指出 文件 的 位 
置 ,以 及 浏览 器 应 该 怎么 处 理 它 。 统 一 资源 定位 符 的 标准 格式 : 


协议 类 型 :// 服 务 器 地 址 (必要 时 需 加 上 端口 号 )/ 路 径 /文件 名 


典型 的 统一 资源 定位 符 的 实例 如 http://news. yourdomain. com: 80/readnews. aspx? 
newsid 二 123, 其 中 : http 是 协议 ; news. yourdomain. com 是 服务 器 ; 80 是 服务 器 上 的 网 络 
端口 号 ; /readnews. aspx 是 路 径 ; ? newsid 二 123 是 查询 变量 和 数值 。 

大 多 数 网 页 浏览 器 不 要 求 用 户 输入 网 页 中 的 “http://” 部 分 ,因为 绝 大 多 数 网 页 内 容 是 
超 文 本 传输 协议 文件 。 同样,“80” 是 超 文 本 传输 协议 文件 的 常用 端口 号 ,因此 一 般 也 不 必 写 
明 。 一 般 来 说 ,用 户 只 要 键入 统一 资源 定位 符 的 一 部 分 就 可 以 了 。 

由 于 超 文本 传输 协议 允许 服务 器 将 浏览 器 重 定向 到 另 一 个 网 页 地 址 ,因此 许多 服务 器 
允许 用 户 省 略 网 页 地 址 中 的 部 分 ,例如 www。 从 技术 上 说 ,这 样 省 略 后 的 网 页 地 址 实际 上 
是 一 个 不 同 的 网 页 地 址 ,浏览 器 本 身 无 法 决定 这 个 新 地 址 是 否 可 访问 ,服务 器 必须 完成 重 定 
向 的 任务 。 


1.1.5 MIME 


多 用 途 互 联网 邮件 扩展 类 型 (Multipurpose Internet Mail Extensions, MIME) 是 一 个 互 
联网 标准 ,最 早 应 用 于 电子 邮件 系统 ,但 后 来 也 应 用 到 浏览 器 。 在 万 维 网 中 使 用 的 HTTP 
中 也 使 用 了 MIME 的 框架 ,标准 被 扩展 为 互联 网 媒体 类 型 。MIME 规定 了 用 于 表示 各 种 各 
样 的 数据 类 型 的 符号 化 方法 。MIME 消息 能 包含 文本 、 图 像 .音频 、 视 频 , 以 及 其 他 应 用 程 
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序 专用 的 数据 。 

MIME 设 定 某 种 文件 扩展 名 ,用 于 指定 一 些 客户 端 自 定义 的 文件 名 ,以 及 一 些 媒体 文 
件 的 打开 方式 。 当 带 有 该 扩展 名 的 文件 被 访问 的 时 候 , 浏 览 器 会 自动 使 用 指定 应 用 程序 打 
开 。 常 见 的 MIME 类 型 及 其 对 应 的 文件 扩展 名 见 表 1-1。 


表 1-1 常见 的 MIME 类 型 及 其 对 应 的 文件 扩展 名 
























































类 型 / 子 类 型 扩 展 名 
application/msword doc 
application/msword dot 
application/octet-stream exe 
application/pdf pdf 
application/postscript ps 
application/rtf rtf 
application/vnd. ms-excel xls 
application/vnd. ms-powerpoint pps 
application/vnd. ms-powerpoint ppt 
application/ winhlp hlp 
application/x-gzip gz 
application/x-javascript js 
application/x-latex latex 
text/css css 
text/html htm 
text/html html 
text/plain txt 

1.1.6 HTTP 


超 文本 传输 协议 (HTTP) 是 Internet 上 应 用 较 广 泛 的 一 种 网 络 协议 。 设 计 HTTP 的 
最 初 目的 是 为 了 提供 一 种 发 布 和 接收 HTML 页 面 的 方法 。 通 过 HTTP 或 者 HTTPS 请 求 
的 资源 由 统一 资源 标识 符 (Uniform Resource Identifiers, URD 标 识 。 

HTTP 定义 了 浏览 器 怎样 向 服务 器 请 求 文档 ,以 及 服务 器 怎样 把 文档 传送 给 浏览 器 。 
HTTP 是 面向 应 用 层 的 协议 ,是 因特网 上 能 够 可 靠 地 交换 文件 (包括 文本 声音、 图 像 等 各 
种 多 媒体 文件 ) 的 重要 基础 。 

超 文本 传输 安全 协议 (Hyper Text Transfer Protocol Secure, HTTPS) 是 超 文本 传输 
协议 和 SSL/TLS(Secure Sockets Layer/Transport Layer Security) 的 组 合 , 用 以 提供 加 密 
通信 及 对 网 络 服务 器 身份 的 鉴定 。HTTPS 连接 经 常用 于 网 上 交易 支付 和 企业 信息 系统 中 
敏感 信息 的 传输 。 

HTTPS 和 HTTP 的 区 别 : 

(1) HTTPS 需要 申请 证 书 .一般 免 费 证 书 很 少 ,需要 交 费 ; 而 HTTP 不 需要 证 书 。 

(2) HTTP 是 超 文 本 传输 协议 ,信息 是 明文 传输 ; HTTPS 则 是 具有 安全 性 的 SSL 加 
密 传输 协议 。 

(3) HTTP 和 HTTPS 使 用 的 是 完全 不 同 的 连接 方式 ,用 的 端口 也 不 一 样 ,前 者 是 80， 
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后 者 是 443 。 
(4) HTTP 的 连接 很 简单 ,是 无 状态 的 ; HTTPS 是 由 SSL 十 HTTP 构建 的 可 进行 加 
密 传输 、 身 份 认证 的 网 络 协 议 , 比 HTTP 安全 。 


1.2 Web 浏览 器 


网 页 浏览 器 , 即 Web 浏览 器 ,是 可 以 显示 网 站 服务 器 或 文件 系统 内 的 文件 ,并 让 用 户 与 
这 些 文件 交互 的 一 种 应 用 软件 。 它 可 以 显示 网 站 上 的 文字 、 图 像 及 其 他 信息 。 这 些 文字 或 
图 像 , 可 以 是 连接 其 他 网 址 的 超 链 接 , 供 用 户 浏 览 各 种 信息 。 大 部 分 网 页 为 HTML 格式 ， 
有 些 网 页 由 于 使 用 了 某 个 浏览 器 特定 的 语法 ,只 有 那个 浏览 器 ,才能 正确 显示 。 现 在 ,个 人 
计算 机 上 常见 的 浏览 器 包括 Internet Explorer(IE 浏览 器 )、Google Chrome( 谷 歌 浏览 器 )、 
Mozilla Firefox( 火 狐 浏览 器 ) 等 。 随 着 互联 网 技术 的 发 展 和 开发 商 对 用 户 需 求 的 不 断 了 
解 , 越 来 越 多 的 新 型 浏览 器 开始 诞生 ,它们 慢 慢 由 通用 浏览 器 变 得 更 加 专业 起 来 ,如 关注 网 
络 安全 的 浏览 器 有 360 安全 浏览 器 ; 关注 商务 购买 的 浏览 器 有 淘宝 浏览 器 等 。 

Web 浏览 器 常见 的 功能 包括 : 收藏 夹 管 理 ,书签 管理 .下 载 管理 .网 页 内 容 缓存 .通过 第 
= 方 插件 (Plugins) 支 持 多 媒体 、 分 页 浏览 .禁止 弹出 式 广告 .广告 过 滤 等 。 

Web 浏览 器 常见 的 支持 标准 有 HTTP( 超 文本 传输 协议 ) HTTPS( 超 文本 传输 安全 协 
议 ) .HTML( 超 文本 标记 语言 ) XHTML( 可 扩展 的 超 文本 标记 语言 ) XML( 可 扩展 标记 语 
言 ) .图 像 文件 格式 (如 GIF .PNG JPEG) CSS( 层 释 样 式 表 ) JavaScript 脚本 等 。 


1.3 Web 服务 器 


1.3.1 Web 服务 器 概述 


Web 服务 器 也 称 为 WWW 服务 器 ,主要 功能 是 提供 网 上 信息 浏览 服务 。WWW 是 
Internet 的 多 媒体 信息 查询 工具 ,是 Internet 上 近 几 年 才 发 展 起 来 的 服务 ,也 是 发 展 最 快 和 
目前 使 用 最 广泛 的 服务 。 正 是 因为 有 了 WWW 工具 , 才 使 得 近年 来 Internet 迅速 发 展 ,用 
户 数量 飞速 增长 。 

虽然 每 个 Web 服务 器 程序 有 很 多 不 同 , 但 它们 有 一 些 共 同 的 特点 : 每 个 Web 服务 器 
程序 都 从 网 络 接受 HTTP 请 求 , 然 后 提供 HTTP 回复 给 请 求 者 。HTTP 回复 一 般 包含 一 
个 HTML 文件 ,有 时 也 可 以 包含 纯 文本 文件 .图 像 或 其 他 类 型 的 文件 。 

Web 服务 器 程序 是 一 种 被 动 程序 : 只 有 当 Internet 上 运行 在 其 他 计算 机 中 的 浏览 器 发 
出 请 求 时 ,服务 器 才 会 响应 。 最 常用 的 Web 服务 器 程序 是 Internet 信息 服务 器 (Internet 
Information Services,IJIIS) 和 Apache。 


1.3.2 Apache 服务 器 


Apache HTTP Server( 简 称 Apache) 是 Apache 软件 基金 会 的 一 个 开放 源 代码 的 Web 
服务 器 ,可 以 在 大 多 数 计算 机 操作 系统 中 运行 ,由 于 其 跨 平台 和 安全 性 ,被 广泛 使 用 ,是 流行 
的 Web 服务 器 软件 之 一 。 
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世界 上 很 多 著名 的 网 站 ,如 Amazon Yahoo 等 都 采用 Apache 服务 器 。 它 的 成 功 之 处 
主要 在 于 它 的 源 代码 开放 、 有 一 支 开 放 的 开发 队伍 、 支 持 跨 平台 的 应 用 (可 以 运行 在 几乎 所 
有 的 Windows、UNIX、Linux 系统 平台 上 ), 以 及 它 的 可 移植 性 等 方面 。 

因为 Apache 是 自由 软件 ,所 以 不 断 有 人 为 它 开发 新 的 功能 、 新 的 特性 、 修 改 原来 的 缺 
陷 。Apache 的 特点 是 : 简单 、 速 度 快 .性 能 稳定 ,并 可 作为 代理 服务 器 来 使 用 。 

使 用 Apache 作为 Web 服务 器 ,只 要 对 Apache 进行 适当 的 优化 配置 ,就 能 让 Apache 
发 挥 出 更 好 的 性 能 ; 反 过 来 说 ,如 果 Apache 的 配置 非常 糟糕 ,Apache 可 能 无 法 正常 服务 。 
需要 注意 的 是 ,要 想 让 Apache 发 挥 出 更 好 的 性 能 ,首先 必须 保证 硬件 和 操作 系统 能 够 满足 
Apache 的 负载 需要 。 如 果 由 于 硬件 和 操作 系统 的 原因 导致 Apache 的 运行 性 能 受到 较 大 
的 影响 ,即使 对 Apache 本 身 优化 配置 得 再 好 ,也 无 济 于 事 。 


1.3.3 IIS 服务 器 


因特网 信息 服务 (Internet Information Services, IIS), 是 由 微软 公司 提供 的 基于 
Microsoft Windows 的 因特网 基本 服务 。IIS 提供 了 一 个 图 形 界面 的 管理 工具 , 称 为 
Internet 服务 管理 器 ,可 用 于 监视 配置 和 控制 Internet 服务 。 

IIS 的 Web 服务 组 件 包括 Web 服务 器 .FTP 服务 器 NNTP 服务 器 和 SMTP 服务 器 ， 
分 别 用 于 网 页 浏览 .文件 传输 .新 闻 服 务 和 邮件 发 送 等 功能 。 它 使 得 在 网 络 (包括 互联 网 和 
局 域 网 ) 上 发 布 信息 成 了 一 件 很 容易 的 事 。 

1. US 的 架构 

IIS 的 网 站 是 根 对 象 ,由 应 用 程序 组 成 ,应 用 程序 则 包括 虚拟 目录 。IIS 组 织 架 构 上 呈 
现 出 一 种 层次 关系 : 一 个 网 站 中 可 以 有 一 个 或 者 多 个 应 用 程序 ,一 个 应 用 程序 中 可 以 有 一 
个 或 者 多 个 虚拟 目录 (virtual directory) ,而 一 个 virtual directory 则 对 应 着 一 个 物理 路 径 。 
一 个 网 站 默认 会 至 少 有 一 个 应 用 程序 , 称 为 根 应 用 程序 (root application) 或 者 默认 应 用 程 
序 (default application) , 而 一 个 应 用 程序 至 少 有 一 个 虚拟 目录 , 称 为 根 虚拟 目录 (root 
virtual directory) 。 

2. IIS 的 网 站 

Web 网 站 驻 留 在 Web 服务 器 中 。Web 服务 器 可 以 接收 从 Web 浏览 器 发 来 的 HTTP 
请 求 , 并 且 可 以 根据 Web 网 站 所 需 的 格式 将 数据 返回 给 Web 网 站 。 

Web 网 站 是 由 一 系列 页 面 、 图 像 . 视 频 ,以 及 其 他 数字 化 内 容 所 组 成 的 集合 ,这 些 内 容 
可 以 通过 HTTP 进行 访问 。 页 面 一 般 是 HTML、ASP、ASPX 或 PHP 格式 , 既 可 以 是 简单 
的 静态 页 面 , 也 可 以 是 能 够 相互 协作 、 能 够 访问 后 端 数据 库 ,并 且 能 够 通过 Web 浏览 器 传送 
数据 的 动态 页 面 ,还 可 以 是 静态 内 容 和 动态 内 容 的 组 合 。 如 果 Web 网 站 能 够 从 一 个 数据 库 
提取 数据 ,并 且 为 外 界 提 供 数据 服务 ,那么 这 类 网 站 一 般 被 称 为 Web 应 用 程序 。 

网 站 是 应 用 程序 和 虚拟 目录 的 容器 ,提供 了 与 应 用 程序 的 唯一 的 绑 定 ,网 站 可 以 通过 这 
个 绑 定 访问 应 用 程序 。 一 个 绑 定 包 括 两 个 属性 : 绑 定 协议 和 绑 定 信息 。 绑 定 协议 确定 了 服 
务 器 和 客户 交换 数据 时 使 用 的 协议 ,如 HTTP 和 HTTPS。 绑 定 信 息 确 定 了 客户 如 何 访问 
服务 器 ,包括 IP 地 址 .端口 编号 ,以 及 主机 头等 信息 。 针 对 同一 个 网 站 ,可 以 使 用 多 个 绑 定 
协议 。 例 如 ,网 站 可 以 使 用 HTTP 提供 标准 内 容 的 服务 ,同时 可 以 使 用 HTTPS 来 处 理 登 
录 页 面 。 
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3. JIIS 的 应 用 程序 

IIS 的 应 用 程序 是 由 一 些 文件 和 文件 夹 组 成 的 集合 ,这 些 文件 和 文件 夹 可 以 通过 诸如 
HTTP 或 HTTPS 等 协议 为 外 界 提供 服务 。IIS 的 每 个 网 站 至 少 包 括 一 个 应 用 程序 , 即 根 
应 用 程序 ,但 是 在 必要 情况 下 ,一 个 网 站 可 以 包括 多 个 应 用 程序 。IIS 的 应 用 程序 不 仅 支持 
HTTP 和 HTTPS ,而 且 还 可 以 支持 其 他 协议 。 

4. JIS 的 虚拟 目录 

虚拟 目录 是 这 样 的 一 个 目录 或 路 径 : 该 目录 或 路 径 可 以 映射 为 本 地 或 远程 服务 器 中 文 
件 的 物理 位 置 。 与 网 站 一 样 ,应 用 程序 也 至 少 拥有 一 个 根 虚拟 目录 。 当 然 , 还 可 以 拥有 多 个 
虚拟 目录 。 如 果 应 用 程序 需要 访问 某 些 文件 ,但 是 又 不 希望 将 这 些 文 件 添 加 到 保存 应 用 程 
序 的 物理 文件 夹 结构 中 ,那么 就 可 以 使 用 虚拟 目录 。 

利用 虚拟 目录 ,可 以 令 客户 通过 FTP 将 图 像 上 传 到 网 站 ,而 不 需要 为 客户 指派 访问 
Web 网 站 代码 库 的 权限 。 客 户 上 传 图 像 时 ,保存 图 像 的 物理 目录 是 与 Web 网 站 文件 的 保 
存 目录 隔离 开 的 ,单独 保存 在 一 个 目录 结构 中 。 同 时 ,利用 虚拟 目录 , Web 网 站 又 可 以 访问 
这 些 图 像 文件 。 

s. 应 用 程序 池 和 进程 

应 用 程序 池 是 将 一 个 或 多 个 应 用 程序 链接 到 一 个 或 多 个 工作 进程 集合 的 配置 。 因 为 应 
用 程序 池 中 的 应 用 程序 与 其 他 应 用 程序 被 工作 进程 边界 分 隔 , 所 以 某 个 应 用 程序 池 中 的 应 
用 程序 不 会 受到 其 他 应 用 程序 池 中 应 用 程序 所 产生 的 问题 的 影响 。 


1.4 系统 的 主要 技术 


1.4.1 HTML 概述 


超 文本 标记 语言 (Hypertext Markup Language,HTML) ,是 为 网 页 创建 和 其 他 可 在 网 
页 浏览 器 中 看 到 的 信息 设计 的 一 种 标记 语言 。HTML 用 来 结构 化 信息 ,例如 标题 ,段落 和 
列表 等 ,也 可 用 来 在 一 定 程度 上 描述 文档 的 外 观 和 语义 。 由 简化 的 SGML( 标 准 通 用 标记 
语言 ) 语 法 进行 进一步 发 展 而 来 的 HTML ,后 来 成 为 国际 标准 ,由 万 维 网 联盟 (World Wide 
Web Consortium, W3C) 维 护 。 

W3C 目前 建议 使 用 XHTML 1.1、XHTML 1.0 或 者 HTML 4. 01 标准 编写 网 页 ,但 已 
有 许多 网 页 转 用 较 新 的 HTML 5 编码 撰写 。HTML 文件 最 常用 的 扩展 名 为 . html, 网 页 制 
作者 可 以 使 用 任何 基本 的 文本 编辑 器 (如 Notepad 等 ) 或 所 见 即 所 得 的 HTML 编辑 器 来 编 
辑 HTML 文件 。 

HTML 文档 制作 不 是 很 复杂 ,但 功能 强大 ,支持 不 同 数 据 格式 的 文件 嵌入 ,这 也 是 
Web 盛行 的 原因 之 一 ,其 主要 特点 如 下 : 

简易 性 : HTML 版 本 升级 采用 超 集 方式 ,从 而 更 加 灵活 方便 。 

可 扩展 性 : HTML 具有 较 好 的 可 扩展 性 。 

平台 无 关 性 : HTML 可 以 使 用 在 广泛 的 平台 上 。 

通用 性 : HTML 是 一 种 简单 通用 的 标记 语言 。 它 允许 网 页 制作 者 建立 文本 与 图 片 相 
结合 的 复杂 页 面 ,这 些 页 面 可 以 被 网 上 任何 其 他 人 浏览 到 ,无 论 使 用 的 是 什么 类 型 的 计算 机 
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或 浏览 器 。 

可 扩展 超 文 本 标记 语言 (eXtensible HyperText Markup Language,XHTML) 是 一 种 标 
记 语言 ,表现 方式 与 超 文本 标记 语言 (HTML) 类 似 , 不 过 语法 上 更 加 严格 。 从 继承 关系 上 
讲 ,HTML 是 一 种 基于 标准 通用 标记 语言 (Standard Generalized Markup Language， 
SGML) 的 应 用 ,而 XHTML 则 基于 可 扩展 标记 语言 (eXtensible Markup Language, XML)。 
XML 是 SGML 的 一 个 子 集 。 

HTML 5 是 HTML 的 下 一 个 主要 修订 版 本 ,现在 仍 处 于 发 展 阶段 ,目标 是 取代 早 前 制 
定 的 HTML 4.01 和 XHTML 1.0 标准 ,以 期 能 在 互联 网 应 用 迅速 发 展 的 时 候 ,使 网 络 标准 
能 符合 当代 的 网 络 需 求 。HTML 5 实际 上 指 的 是 包括 HTML、CSS 和 JavaScript 在 内 的 一 
套 技术 组 合 。 


1.4.2 JavaScript 概述 


JavaScript 是 一 种 直译 式 脚 本 语言 ,其 源 代码 在 发 往 客户 端 运行 之 前 不 需 经 过 编译 ,而 
是 将 文本 格式 的 字符 代码 发 送 给 浏览 器 解释 运行 。JavaScript 的 解释 器 被 称 为 JavaScript 
引擎 ,为 浏览 器 的 一 部 分 。JavaScript 是 广泛 用 于 客户 端的 脚本 语言 ,最 早 在 HTML 网 页 
上 使 用 ,用 来 给 HTML 网 页 增加 动态 功能 。 它 可 以 直接 嵌入 HTML 网 页 中 ,但 写成 单独 
的 js 文件 有 利于 结构 和 行为 的 分 离 。 

JavaScript 的 常见 用 途 包括 : 幅 入 动态 文本 于 HTML 网 页 ; 对 浏览 器 事件 做 出 响应 ; 
读 写 HTML 元 素 ; 在 数据 被 提交 到 服务 器 之 前 验证 数据 ; 检测 访客 的 浏览 器 信息 ; 控制 
Cookies, 包 括 创建 和 修改 等 。 

不 同 于 服务 器 端 脚本 语言 ,如 PHP、ASP。JavaScript 主要 作为 客户 端 脚本 语言 在 用 户 
的 浏览 器 上 运行 ,不 需要 服务 器 的 支持 。 因 此 ,早期 的 程序 员 比 较 青睐 于 JavaScript, 以 减 
少 对 服务 器 的 负担 ,与 此 同时 也 带 来 了 安全 性 问题 。 

随 着 服务 器 的 性 能 提升 ,虽然 现在 的 程序 员 更 喜欢 运行 于 服务 端的 脚本 ,以 保证 安全 ， 
但 JavaScript 仍然 以 其 跨 平台 、 容 易 上 手 等 优势 大 行 其 道 。 同 时 ,有 些 特殊 功能 (如 Ajax) 
必须 依赖 JavaScript 在 客户 端 进行 支持 。 


1.4.3 XML 概述 


可 扩展 标记 语言 (XML) 是 一 种 标记 语言 。XML 是 从 标准 通用 标记 语言 简化 修改 而 来 
的 ,是 SGML 的 子 集 。 它 可 以 用 来 标记 数据 、 定 义 数 据 类 型 ,是 一 种 允许 用 户 对 自己 的 标记 
语言 进行 定义 的 源 语言 。 它 非常 适合 Web 传输 ,提供 统一 的 方法 来 描述 和 交换 独立 于 应 用 
程序 的 结构 化 数据 。XML 是 各 种 应 用 程序 之 间 进 行 数据 传输 的 常用 工具 。 

XML 被 设计 用 来 传输 和 存储 数据 , HTML 被 设计 用 来 显示 数据 。 XML 和 HTML 为 
不 同 的 目的 而 设计 ,它们 都 是 SGML 的 子 集 。 因 此 ,XML 不 是 HTML 的 替代 ,而 是 对 
HTML 的 补充 。 

XML 的 简单 使 其 易于 在 应 用 程序 中 读 写 数据 ,这 使 XML 很 快 成 为 数据 交换 的 公共 语 
言 ,虽然 不 同 的 应 用 软件 也 支持 其 他 的 数据 交换 格式 ,但 不 久之 后 它们 将 支持 XML , 那 就 意 
味 着 程序 可 以 更 容易 地 与 Windows、Mac OS、Linux 以 及 其 他 平台 下 产生 的 信息 结合 ,然后 
可 以 很 容易 加 载 XML 数据 到 程序 中 并 分 析 它 ,并 以 XML 格式 输出 结果 。 
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XML 被 广泛 用 来 作为 跨 平台 之 间 交 互 数据 的 形式 ,主要 针对 数据 的 内 容 , 通 过 不 同 的 
格式 化 描述 手段 (如 XSLT、CSS 等 ) 可 以 完成 最 终 的 形式 表达 (生成 对 应 的 HTML、PDF 或 
者 其 他 的 文件 格式 ) 。 


1.4.4 PHP 概述 


超 文本 预 处理 器 (Hypertext Preprocessor,PHP) 是 一 种 开源 的 通用 计算 机 脚本 语言 ， 
尤其 适用 于 网 络 开发 并 可 内 入 HTML 中 使 用 。PHP 的 语法 借鉴 吸收 C Java 和 Perl 等 流 
行 计算 机 语言 的 特点 ,易于 一 般 程序 员 学 习 。PHP 的 主要 目标 是 允许 网 络 开 发 人 员 快 速 编 
写 动态 页 面 , 但 PHP 也 被 用 于 其 他 很 多 领域 。 

PHP 独特 的 语法 混合 了 C Java、Perl 以 及 PHP 自 创 的 语法 ,执行 动态 网 页 的 速度 快 。 
用 PHP 做 出 的 动态 页 面 与 其 他 的 编程 语言 相 比 ,PHP 是 将 程序 嵌入 到 HTML 文档 中 去 执 
行 , 执 行 效率 比 完全 生成 HTML 标记 的 通用 网 关 接口 (Common Gateway Interface, CGI) 
要 高 许多 ; PHP 还 可 以 执行 编译 后 代码 ,编译 可 以 达到 加 密 和 优化 代码 并 行 ,使 代码 运行 
更 快 。 

PHP 的 应 用 范围 相当 广泛 ,尤其 是 在 网 页 程序 的 开发 上 。 一 般 来 说 ,PHP 大 多 运行 在 
网 页 服务 器 上 ,通过 运行 PHP 代码 来 产生 用 户 浏览 的 网 页 。PHP 可 以 在 多 数 的 服务 器 和 
操作 系统 上 运行 。 

一 般 来 说 ,大 多 数 PHP 代码 在 服务 器 端 运行 ,通过 浏览 器 客户 端 访 问 。 此 外 ,PHP 也 
可 以 用 来 开发 命令 行 脚本 程序 和 用 户 端 的 图 形 用 户 界面 (Graphical User Interface,GUD 应 
用 程序 。PHP 可 以 在 许多 不 同 种 类 的 服务 器 .操作 系统 .平台 上 运行 ,也 可 以 和 许多 数据 库 
系统 结合 。 使 用 PHP 不 需要 任何 费用 ,PHP 官方 提供 了 完整 的 程序 源 代码 ,允许 用 户 修 
改 、 编 译 , 扩 充 来 使 用 。 


1.4.5 Ajax 概述 


Ajax( 异 步 的 JavaScript 与 XML 技术 ) 指 的 是 一 套 综 合 了 多 项 技术 的 浏览 器 端 网 页 开 
发 技术 。 虽 然 其 名 称 包含 XML, 但 实际 上 数据 格式 可 以 由 JSON (JavaScript Object 
Notation ,JS 对 象 标记 ) 代 替 ,进一步 减少 数据 量 ,形成 所 谓 的 Ajax。 

传统 的 Web 应 用 允许 用 户 端 填写 表单 , 当 提交 表单 时 ,就 向 Web 服务 器 发 送 一 个 请 
求 。 服 务 器 接收 并 处 理 传 来 的 表单 ,然后 送 回 一 个 新 的 网 页 ,但 这 个 做 法 浪费 了 许多 带宽 ， 
因为 在 前 后 两 个 页 面 中 的 大 部 分 HTML 代码 往往 是 相同 的 。 由 于 每 次 应 用 的 沟通 都 需要 
向 服务 器 发 送 请 求 , 应 用 的 回应 时 间 依 赖 于 服务 器 的 回应 时 间 , 这 导致 用 户 界面 的 回应 比 本 
机 应 用 慢 很 多 。 

与 此 不 同 , Ajax 应 用 可 以 仅 向 服务 器 发 送 并 取 回 必需 的 数据 ,并 在 客户 端 采用 
JavaScript 处 理 来 自 服务 器 的 回应 。 因 为 在 服务 器 和 浏览 器 之 间 交 换 的 数据 大 量 减 少 , 服 
务 器 回应 更 快 了 。 同 时 ,很 多 的 处 理工 作 可 以 在 发 出 请 求 的 客户 端 机 器 上 完成 ,因此 Web 
服务 器 的 负荷 也 减少 了 。 

通过 在 后 台 与 服务 器 进行 少量 数据 交换 ,Ajax 可 以 使 网 页 实现 异步 更 新 。 这 意味 着 可 
以 在 不 重新 加 载 整个 网 页 的 情况 下 ,对 网 页 的 某 部 分 进行 更 新 。 传 统 的 网 页 如 果 需 要 更 新 
内 容 ,必须 重 载 整个 网 页 。 使 用 Ajax 的 最 大 优点 ,就 是 能 在 不 更 新 整个 页 面 的 前 提 下 维护 
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数据 。 这 使 得 Web 应 用 程序 更 为 迅捷 地 回应 用 户 动作 ,并 避免 了 在 网 络 上 发 送 那些 没有 改 
变 的 信息 。 


wD 


. 简单 分 析 Web 1.0、Web 2.0、Web 3.0 的 特点 。 

. 分析 URL: http://localhost: 8080/readnews. aspx? newsid 一 123 的 含义 。 
. 请 说 明 Web 系统 的 HTTPS 和 HTTP 的 区 别 。 

. 简 述 Apache 和 IIS 两 个 Web 服务 器 的 共同 点 和 区 别 。 

. 解释 虚拟 目录 和 Web 应 用 程序 的 关系 。 

. 简 述 HTML,XHTML,HTML 5 之 间 的 关系 。 





HTML 网 页 设计 基础 


2.1 HTML 网 页 


HTML 编写 的 网 页 文件 ,也 称 HTML 页 面 文件 ,或 称 HTML 文档 ,是 由 HTML 标记 
组 成 的 描述 性 文本 。HTML 不 是 一 种 编程 语言 ,而 是 一 种 标记 语言 。HTML 文件 由 各 种 
元 素 和 标签 组 成 ,这 些 标记 可 以 说 明文 字 、 图 形 动画 、 声 音 、 表 格 、 链 接 等 。 


2.1.1 HTML 概述 


1994 年 末 ,Tim Berners-Lee 开发 了 最 初 的 HTML 版 本 ,并 创建 了 万 维 网 联盟 (W3C) 
开发 和 推广 的 Web 技术 标准 。1995 年 末 , 发 布 了 第 一 个 HTML 标准 HTML 2.0。HTML 
2.0 是 过 时 的 HTML 版 本 ,目前 在 市 场 上 可 以 找到 的 浏览 器 都 依赖 于 更 新 版 本 的 HTML。 

1997 年 1 月 ,W3C 标准 发 布 了 HTML 3.2, 在 HTML 2.0 标准 上 添加 了 被 广泛 运用 
的 特性 ,如 字体 、 表 格 、Applets、 围 绕 图 像 的 文本 流 、 上 标 和 下 标 。1997 年 12 月 ,W3C 发 布 
了 HTML 4.0 的 规范 。HTML 4. 0 最 重要 的 特性 是 引入 了 CSS( 层 释 样 式 表 )。 

1999 年 12 月,W3C 发 布 了 HTML 4.01, 它 仅 是 针对 HTML 4.0 的 一 次 较 小 的 更 新 ， 
修正 和 修复 了 漏洞 。HTML 4. 01 存在 两 个 根本 性 的 问题 : 语法 规则 不 严谨 , 当 遇 到 错误 
时 ,每 个 浏览 器 都 有 自己 的 错误 恢复 机 制 。2000 年 1 月 ,W3C 发 布 了 XHTML 1. 0 ,解决 了 
HTML 4. 01 的 两 个 问题 。 

2008 年 1 月 ,W3C 发 布 了 HTML 5, 放 弃 了 XHTML 2.0, 采 取 了 HTML 的 发 展 道 
路 。HTML 5 中 的 新 特性 包括 了 嵌入 音频 视频 和 图 形 的 功能 ,客户 端 数据 存储 ,以 及 交互 
式 文档 。HTML 5 还 包含 了 新 的 元 素 , 如 < nav >、< header >、< footer > 以 及 < figure > 等 。 
HTML 5 工作 组 包括 : AOL,Apple,Google,IBM,Microsoft,Mozilla,Nokia,Opera ,以 及 数 
百 个 其 他 的 供应 商 。 


2.1.2 HTML 文件 结构 


HTML 是 一 种 标签 语言 ,标签 是 由 尖 括 号 包围 的 关键 词 , 例 如 < HTML >。 它 通常 是 
成 对 出 现 的 ,例如 < title > 和 </ title >。 标 签 对 的 第 一 个 标签 是 开始 标签 ,第 二 个 标签 是 结 
束 标签 。 开 始 和 结束 标签 也 被 称 为 开放 标签 和 闭合 标签 。 在 任何 一 个 HTML 文件 中 ,最 
先 出 现 的 HTML 标签 是 < HTML >, 用 于 表示 该 文件 是 以 超 文本 标记 语言 (HTML) 编 写 
的 ,对 应 的 结束 标签 </HTML > 位 于 文件 末尾 。 在 HTML 标签 中 ,还 可 以 设置 一 些 属性 ， 
控制 标签 建立 的 元 素 。 
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HTML 元 素 是 指 从 开始 标签 到 结束 标签 的 所 有 代码 。 大 多 数 的 HTML 元 素 可 以 嵌 套 
(包含 其 他 HTML 元 素 ) 。 没 有 内 容 的 HTML 元 素 被 称 为 空 元 素 ,例如 换行 符 < br/>。 一 
个 完整 的 HTML 文件 包括 标题 .段落 、 列 表 、 表 格 ,以 及 各 种 嵌入 对 象 ,这 些 对 象 统称 为 
HTML 元 素 。 

< HTML > 元 素 定 义 了 整个 HTML 文件 ,开始 标签 < HTML >, 结 束 标签 </HTML >， 
以 及 包含 了 两 个 主要 的 子 元 素 , 这 两 个 子 元 素 是 由 < head > 标签 和 < body > 标签 建立 的 。 
< head> 标 签 建立 的 元 素 内 容 为 文件 头 部 ,< body > 标签 建立 的 元 素 内 容 为 文件 主体 。 

Web 浏览 器 的 作用 是 读 取 HTML 文件 ,并 以 网 页 的 形式 显示 出 它们 。 浏 览 器 不 会 显 
示 HTML 标签 ,而 是 使 用 标签 来 解释 页 面 的 内 容 。 

一 个 HTML 文件 的 基本 结构 如 下 : 


<HTML> <! -- 文 件 开始 标签 --> 
< head> <! -- 文 件 头 部 开始 标签 -一 > 
<title> HTML 文件 的 基本 结构 </title> <! -- 文件 标题 标签 --> 
</head> <! -- 文件 头 部 结束 标签 -- > 
< body> <! -- 文 件 主体 开始 标签 -- > 
这 是 一 个 简单 的 HTML 文件 . <! -- 文 件 主体 内 容 --> 
</body> <! -- 文 件 主体 结束 标签 -- > 
</HTML > <! -- 文件 结束 标签 --> 


其 中 ,< head > 与 </head > 之 间作 为 文件 头 部 ,用 于 说 明文 件 标题 及 整个 文件 的 一 些 公 
共 属 性 ; < body > 与 </body > 之 间作 为 文件 主体 ,用 于 说 明文 件 的 主要 内 容 。 

【 例 2-1〗 用 VS 2013 创建 一 个 HTML 文档 。 

第 1 步 ,用 VS 2013 新 建 一 个 空 网 站 HTMLWebsites 项 目 。 

第 2 步 ,添加 新 项 目 HTML 文件 ,命名 为 Ex2-1. HTML ,设置 为 起 始 页 ,添加 代码 : 


<! DOCTYPE HTML PUBLIC " ~ //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www. w3. org /TR/ HTMLA/loose. dtd"> 
<HTML> 
<! -- 这 是 一 个 HTML 文档 基本 标记 演示 --> 
<head > 
<Meta http ~ equiv = "Content ~ TYpe”content = "text/HTML; charset = gb2312"> 
<title> HTML 文档 基本 标记 演示 </title> 
</head> 
<body> 
这 是 一 个 HTML 文档 基本 标记 演示 效果 ! 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,结果 如 图 2-1 所 示 。 


国 轩 钨 httpyjlocalhost29367JEx2-1html 


x 和 ~ 
帘 四 于 X 网 站 中 | 昭 生 简章 ] 2 校 3 院 倾 力 打 .。 图 百度 - 
这 是 一 个 HTML 文 档 基本 标记 演示 获 果 ! 








图 2-1 HTML 文档 的 基本 标记 显示 效果 
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例 2-1 中 的 文档 类 型 标记 "DOCTYPE" 指 定 文档 中 使 用 的 HTML 版 本 号 ,可 以 和 哪个 
验证 工具 一 起 使 用 ,以 保证 此 HTML 文档 与 HTML 推荐 标准 一 致 。 例 如 : <! DOCTYPE 
HTML PUBLIC "-//W3C// DTD HTML 4. 01 Transitional//EN", http://www. w3. 
org/TR/HTML4/ loose. dtd >, 表 明 此 文档 应 符合 W3C 制定 的 HTML 4. 01 规范 。 如 果 使 
用 VS 2013 新 建 的 HTML 文档 ,第 一 行 自动 生成 的 代码 : <! DOCTYPE HTML PUBLIC 
"-//W3C/DTD XHTML1.0 Transitional //EN" "http://www. w3. org/TR/ xHTML 1/ 
DTD/xHTMIL-Transitional. dtd">, 表 明 此 文档 应 符合 WC 制定 的 XHTML 1. 0 规范 。 文 
档 类 型 标记 是 每 个 HTML 文档 必需 的 ,如 果 HTML 文档 中 没有 文档 类 型 标记 ,浏览 器 会 
采用 默认 的 方式 , 即 W3C 推荐 HTML 4.0 处 理 此 文档 。 


2.1.3 文件 编辑 器 


编写 HTML 文件 的 方法 有 两 种 : 一 种 是 手工 直接 编写 ,可 以 使 用 任 一 文本 编辑 器 来 编 
写 HTML 文件 ,如 Windows 系统 自 带 的 记事 本 ; 另 一 种 是 使 用 可 视 化 编辑 器 。 常 见 的 软 
件 有 FrontPage、Dreamweaver 等 。 

可 以 使 用 记事 本 来 编写 一 个 简单 的 HTML 文件 ,操作 步骤 如 下 : 

(1) 打开 记事 本 程序 ,在 记事 本 中 输入 下 面 的 HTML 代码 : 

<HTML > 

<head> 

<title> 使 用 记事 本 编辑 的 HTML 文件 </title> 

</head > 

<body> 

这 是 一 个 使 用 记事 本 编辑 的 HTML 文件 。 

</body> 

</HTML > 

(2) 输 完 代 码 后 ,选择 记事 本 菜单 栏 中 的 “文件 ”一 "保存 "命令 ,在 “保存 类 型 "中 选择 
“所 有 文件 ”, 输 入 文件 名 2-1. HTML ,然后 保存 。 

(3) 用 IE 浏览 器 打开 该 网 页 ,运行 效果 如 图 2-2 所 示 。 


[ee 
这 是 一 个 使 用 记事 本 编辑 的 HTML 文 件 。 





2-2 在 记事 本 中 制作 的 网 页 


使 用 Dreamweaver 编辑 HTML 的 过 程 实例 : 
(1) 启动 Dreamweaver CC, 新 建 一 个 HTML 文件 。 
(2) 打开 “代码 ”窗口 ,输入 下 面 的 HTML 代码 : 


<!doctype HTML > <! -- 文档 类 型 声明 --> 
< HTML > 
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<head > 

<Meta charset = "utf- 8" /> <! -一 定义 字符 集 --> 
<title> 使 用 Dreamweaver CC 编辑 的 HTML 文件 </title> 
</head> 

<body> 

这 是 一 个 使 用 Dreamweaver CC 编辑 的 HTML 文件 . 

</body> 

</HTML > 


(3) 输 完 代码 后 ,选择 Dreamweaver CC 菜单 栏 中 的 “文件 ”保存 ”命令 ,在 “保存 类 
型 "中 选择 “所 有 文件 ”, 输 入 文件 名 2-3. HTML ,然后 保存 。 
(4) 用 下 浏览 器 打开 该 网 页 ,运行 效果 如 图 2-3 所 示 。 


ee 
OS wassee ms -8 ennemem cea. «| J 


这 是 一 个 使 用 Dreamweaver CC 编辑 的 HTML 文 忻 。 








2-3 在 Dreamweaver 中 制作 的 网 页 


2.2 HTML 基本 标签 


2.2.1 元 信息 标签 < Meta > 


Meta 标签 是 HTML 中 head 区 的 一 个 辅助 性 标签 ,位 于 HTML 文件 的 头 部 , 即 
<head > 与 </head > 之 间 。< Meta > 元 素 可 提供 有 关 网 页 的 元 信息 ,如 关键 字 、 页 面 描述 \ 作 
者 等 信息 ,这 些 信息 不 显示 在 网 页 中 ,用 户 在 浏览 网 页 时 看 不 到 。Meta 标签 通常 用 来 为 搜 
索引 敬 robots 定义 页 面 主 题 ,或 者 是 定义 用 户 浏 览 器 上 的 Cookie, 它 可 以 用 于 鉴别 作者 , 设 
定 页 面 格式 ,标注 内 容 提要 和 关键 字 ; 还 可 以 设置 页 面 ,使 其 可 以 根据 定义 的 时 间 间 隔 刷 新 
本 页 面 的 显示 等 。 

< Meta > 标签 有 多 个 属性 ,不 同 的 属性 有 不 同 的 参数 值 , 这 些 不 同 的 参数 值 就 实现 了 不 
同 的 网 页 功能 。< Meta > 标签 常用 的 属性 和 取 值 见 表 2-1。 

表 2-1 < Meta > 标签 常用 的 属性 和 取 值 
属 性 值 描 述 
charset character encoding 定义 文档 的 字符 编码 


定义 与 http-equiv 或 name 属性 相关 的 元 信息 。content 
属性 始终 要 和 name 属性 或 http-equiv 属性 一 起 使 用 








content some text 





content-type 
expires 
http-equiv Sl 把 content 属性 关联 到 HTTP 头 部 
set-Cookie 
pragma(cache 模式 ) 
content-script-type 











第 2 章 HTML 网 页 设计 基础 15 





续 表 
属 性 值 描 述 


author 





copyright 
description 
name 把 content 属性 关联 到 一 个 名 称 
keywords 
generator 
robots 


scheme some text 定义 用 于 翻译 content 属性 值 的 格式 











Meta 标签 分 两 大 部 分 : 页 面 描 述 信息 (name) 和 HTTP 标题 信息 CHTTP-EQUIV ) 。 
name 属性 的 语法 格式 是 : 


< Meta name = "参数 " content = "参数 值 "> 


name 属性 主要 用 于 描述 网 页 参数 类 型 ,常用 的 取 值 有 keywords, description ,robots 。 
content 用 于 指定 网 页 参数 的 实际 内 容 , 便 于 搜索 引擎 机 器 人 查找 信息 和 分 类 信息 。 

name 属性 有 以 下 几 种 常用 参数 : 

1) keywords( 关 键 字 ) 

keywords 是 向 搜索 引擎 说 明 网 页 的 关键 字 , 从 而 帮助 搜索 引擎 对 该 网 页 进行 查找 和 分 
类 。 关 键 字 对 网 页 在 搜索 引擎 中 的 排名 起 到 一 定 的 作用 ,是 网 页 优化 的 一 种 方式 。 

【语法 】 

< Meta name = "keywords" content = "关键 字 1, 关键 字 2, …" /> 

在 该 语法 中 ,name 为 属性 名 称 , 其 值 设置 为 keywords, 也 就 是 设置 网 页 的 关键 字 ; 而 
在 content 属性 中 则 定义 关键 字 的 具体 内 容 。 设 置 关 键 字 时 ,不 要 过 多 ,一般 可 以 设置 多 个 
关键 字 ,之 间 用 半角 逗号 隔 开 ,如 : 

<Meta name = "keywords" content = "HTML, HTML 5, CSS, 网 页 设计 ,网 站 建设 " /> 


2) description( 页 面 描述 ) 

description 用 于 描述 网 页 的 主题 等 。 设 置 页 面 描述 也 是 为 了 便于 搜索 引擎 的 查找 ,一 
般 要 和 关键 字 配 合 使 用 。 现 在 流行 的 搜索 引擎 (如 Google,Lycos,AltaVista) 的 工作 原理 : 
搜索 引擎 先 派 机 器 人 自动 在 Web 上 搜索 , 当 发 现 新 的 网 站 时 , 便 检 索 页 面 的 Keywords 和 
Description ,并 将 其 加 入 到 自己 的 数据 库 ,然后 再 根据 关键 字 的 密度 排序 网 站 。 

【语法 】 

<Meta name = "description”content = "页 面 描述 ”/> 

在 该 语法 中 ,name 为 属性 名 称 , 其 值 设 置 为 description, 也 就 是 设置 网 页 的 页 面 描述 ; 
而 在 content 属性 中 则 定义 页 面 描述 的 具体 内 容 , 如 : 


<Meta name = "description" content = "免费 的 中 文 Web 技术 教程 ." /> 


3) generator( 编 辑 工 具 ) 
generator 用 于 说 明 网 页 编辑 工具 的 名 称 。 
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【语法 】 
< Meta name = "generator" content = "编辑 工具 " /> 


在 该 语法 中 ,name 为 属性 名 称 , 其 值 设 置 为 generator, 也 就 是 设置 网 页 的 编辑 工具 ; 
而 在 content 属性 中 则 定义 编辑 工具 的 名 称 , 如 : 





< Meta name = "generator" content = "Dreamweaver CC 2014" /> 


4) author( 作 者 ) 

author 用 于 说 明 网 页 的 作者 信息 。 

【 话 法 】 

<Meta name = "author" content = "作者 " /> 

在 该 请 法 中 ,name 为 属性 名 称 , 其 值 设置 为 author, 也 就 是 设置 作者 信息 ; 而 在 
content 属性 中 则 定义 作者 的 具体 信息 。 使 用 过 程 ,如 : 

<Meta name = "author" content = "小 米 " /> 

5) copyright( 版 权 ) 


copyright 用 于 说 明 网 页 的 版 权 信息 。 

【语法 】 

<Meta name = "copyright" content = "版 权 的 所 有 者 " /> 

在 该 语法 中 ,name 为 属性 名 称 ,其 值 设置 为 copyright, 也 就 是 设置 版 权 信息 ; 而 在 
content 属性 中 则 定义 版 权 的 具体 信息 ,如 : 

<Meta name = ”copyright "content = "本 页 的 版 权 属 于 " /> 


6) robots( 机 器 人 向 导 ) 

robots 用 于 限制 搜索 引擎 对 网 页 的 搜索 方式 。 

【 话 法 】 

< Meta name = "robots" content = "搜索 方式 " /> 

在 该 语法 中 ,name 为 属性 名 称 ,其 值 设 置 为 robots, 也 就 是 设置 搜索 引擎 对 网 页 的 搜索 
方式 ; 而 在 content 属性 中 则 定义 具体 的 搜索 方式 。content 的 参数 值 有 all、none、index、 
follow .noindex、nofollow, 默 认 是 all。content 值 与 其 对 应 的 含义 见 表 2-2。 

表 2-2 content 值 与 其 对 应 的 含义 




















content 值 含 处 
all 网 页 将 被 检索 , 且 网 页 上 的 链接 可 以 被 查询 
none 网 页 将 不 被 检索 ,上 且 网 页 上 的 链接 不 可 以 被 查询 
index 网 页 将 被 检索 
follow 网 页 上 的 链接 可 以 被 查询 
noindex 网 页 将 不 被 检索 ,但 网 页 上 的 链接 可 以 被 查询 
nofollow 网 页 将 被 检索 ,但 网 页 上 的 链接 不 可 以 被 查询 
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使 用 例子 ,如 : 
< Meta name = "robots" content = "none" /> 


http-equiv 属性 相当 于 http 的 文件 头 作 用 , 它 可 以 向 浏览 器 传 回 一 些 有 用 的 信息 ,以 帮 
助 正确 和 精确 地 显示 网 页 内 容 , 与 之 对 应 的 属性 为 content。content 中 的 内 容 其 实 就 是 各 
个 参数 的 变量 值 。 

http-equiv 属性 的 语法 格式 是 : 


< Meta http - equiv = "参数 " content = "参数 值 "> 


其 中 ,http-equiv 属性 有 以 下 几 种 常用 参数 : 

1) content-type( 显 示 字 符 集 的 设 定 ) 

content-type 用 于 设置 网 页 使 用 的 字符 集 , 常 见 的 字符 集 有 ASCII, ANSI, GB2312， 
BIG5,GBK,GB18030,UTF-8 等 。 

ASCII 用 8 位 的 字 节 表示 空格 ,标点 符号 数字 、 大 小 写字 母 或 者 控制 字符 ,其 中 最 高 位 
为 “0”, 其 他 位 可 以 自由 组 合成 128 个 字符 。 

ANSICAmerican National Standards Institute) 是 美国 的 国家 标准 协会 制定 的 编码 ,在 
ASCII 的 标准 上 扩展 而 来 ,但 ANSI 的 编码 是 双 字 节 16 位 的 编码 。 在 简体 中 文 的 操作 系统 
中 ,ANSI 指 的 是 GB2312 ,而 在 日 文 的 操作 系统 中 ,ANSI 指 的 是 JIS(Japanese Industrial 
Standards) ,这 些 编码 之 间 互 相 不 兼容 ,但 所 有 的 ANSI 编码 都 兼容 ASCII 编码 。 

GB2312 是 对 ANSI 的 简体 中 文 扩展 。GB2312 的 原型 是 一 种 区 位 码 ,这 种 编码 把 常见 
的 汉字 分 区 ,每 个 汉字 有 对 应 的 区 号 和 位 号 ,例如 :“ 我 "的 区 号 是 46, 位 号 是 50。GB2312 
因 要 与 ASCII 相 兼容 ,所 以 每 个 字 的 区 号 和 位 号 的 最 高 两 位 都 是 “1 的 8 位 字 节 ,这 两 个 字 
节 组 合 起 来 就 是 一 个 汉字 的 GB2312 编码 。GB2312 编码 中 小 于 127 的 字符 与 ASCII 的 
相同 。 

GB2312 共 收 录 了 7000 个 字符 ,由 于 GB2312 支持 的 汉字 太 少 ,而 且 不 支持 繁体 中 文 ， 
所 以 GBK 对 GB2312 进行 了 扩展 ,对 低 字 节 不 再 做 大 于 127 的 规定 ,以 支持 繁体 中 文 和 更 
多 的 字符 ,GBK 共 支 持 大 概 22000 个 字符 。GB18030 在 GBK 的 基础 上 又 增加 了 几 个 主要 
的 少数 民族 文字 。 

大 五 码 (BIG5) ,又 称 为 大 五 码 或 者 五 大 码 ,是 通行 于 中 国 台湾 香港 地 区 的 一 个 繁体 字 
编码 方案 。 大 五 码 使 用 繁体 中 文 社 群 中 最 常用 的 计算 机 汉字 字符 集 标 准 , 共 收 录 13060 个 
中 文字 ,其 中 有 二 字 为 重 覆 编码 ,BIG5 属 中 文 内 码 (中 文 码 分 为 内 码 及 交换 码 两 类 ) 。 

UTF-8 是 一 次 传输 8 位 的 UTF(Unicode/UCS Transfer Form) 编码 方式 ,一 个 字符 可 
能 会 经 过 1 一 6 次 传输 ,具体 的 与 unicode/UCS 之 间 的 转换 关系 有 关 。 

【语法 】 

<Meta http - equiv = "content - type" content = "text/HTML; charset = 字符 集 " /> 


在 该 语法 中 ,http-equiv 为 属性 名 称 ,其 值 设 置 为 content-type, 也 就 是 设置 网 页 使 用 的 
字符 集 ,而 在 content 属性 中 则 定义 具体 的 字符 集 类 型 。 使 用 实例 ,如 : 


< Meta http - equiv = "content ~ type" content = "text/HTML; charset =utf— 8" /> 
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2) expires( 期 限 ) 

expires 用 于 设 定 网 页 缓存 的 过 期 时 间 ,一 旦 过 期 ,就 必须 从 服务 器 上 重新 加 载 。 
【语法 】 

< Meta http - equiv = "expires" content = "到 期 时 间 " /> 


在 该 语法 中 ,http-equiv 为 属性 名 称 , 其 值 设 置 为 expires, 也 就 是 设置 网 页 缓存 的 过 期 
时 间 ; 而 在 content 属性 中 则 定义 具体 的 时 间 , 时 间 必 须 用 GMT 格式 表示 多 少时 间 后 过 
期 ,或 直接 设 为 0 表示 调用 后 就 过 期 。 使 用 实例 ,如 : 

< Meta http— equiv = "expires" content = "Fri,10 October 2014 18:18:18 GMT" /> 

< Meta http - equiv = "expires" content = "0" /> 

3) refresh( 刷 新 ) 

refresh 用 于 实现 网 页 的 定时 跳 转 , 也 可 实现 网 页 自身 的 定时 (单位 是 秒 ) 刷 新 功能 。 

【语法 】 

<Meta http - equiv = "refresh" content = " 跳 转 时 间 ;url = 链接 地 址 ”/> 


在 该 语法 中 ,http-equiv 为 属性 名 称 , 其 值 设 置 为 refresh, 也 就 是 设置 网 页 的 刷新 ; 而 
在 content 属性 中 则 定义 刷新 的 时 间 和 刷新 后 的 链接 地 址 ,时 间 和 链接 地 址 之 间 用 半角 分 
号 隔 开 。 默 认 情况 下 , 跳 转 时 间 是 以 秘 为 单位 的 。 使 用 实例 ,如 : 

< Meta http - equiv = "refresh" content = "5;url = http://www. baidu. com" /> 

< Meta http - equiv = "refresh" content = "5" /> 

4) set-Cookie(Cookie 设 定 ) 

set-Cookie 用 于 删除 过 期 的 Cookie。 

【语法 】 

< Meta http - equiv = "set - cookie" content = "到 期 时 间 " /> 


浏览 器 访问 某 个 页 面 时 会 将 它 存在 缓存 中 ,下 次 再 次 访问 时 就 可 从 缓存 中 读 取 ,以 提高 
速度 。 当 希望 访问 者 每 次 都 刷新 广告 的 图 标 , 或 每 次 都 刷新 计数 器 ,就 要 禁用 缓存 了 。 通 
常 ,对 于 HTML 文件 ,没有 必要 禁用 缓存 ,对 于 ASP 等 页 面 , 可 以 使 用 禁用 缓存 ,因为 每 次 
看 到 的 页 面 都 是 在 服务 器 动态 生成 的 ,缓存 就 失去 意义 。 如 果 网 页 过 期 ,那么 存盘 的 
Cookie 将 被 删除 。 在 该 语法 中 ,http-equiv 为 属性 名 称 ,其 值 设置 为 setrCookie, 也 就 是 设置 
删除 过 期 的 Cookie; 而 在 content 属性 中 则 定义 具体 的 时 间 ,时 间 必 须 用 GMT 格式 。 使 用 
实例 ,如 : 


<Meta http - equiv = "set - cookie" content = "Fri,10 October 2014 18:18:18 GMT" /> 


5) Pragma(Cache 模式 ) 

Pragma 禁止 浏览 器 从 本 地 机 的 缓存 中 调 阅 页 面 内 容 。 
【语法 】 

<Meta http 一 equiv = "Pragma" Content = "No cache"> 


网 页 若 不 保存 在 缓存 中 , 则 每 次 访问 都 会 刷新 页 面 。 这 样 设 定 ,访问 者 将 无 法 脱 机 
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浏览 。 

6) X-UA-Compatible(IE 浏览 器 兼容 模式 ) 

文件 兼容 性 用 于 定义 让 IE 如 何 编译 网 页 。 此 文件 解释 文件 兼容 性 ,如 何 指定 网 站 的 文 
件 兼 容 性 模式 ,以 及 如 何 判断 一 个 网 页 该 使 用 的 文件 模式 。 为 了 帮助 确保 网 页 在 所 有 未 来 
的 IE 版 本 都 有 一 致 的 外 观 ,IE 8.0 引 入 了 文件 兼容 性 。 在 IE 6.0 中 引入 一 个 增设 的 兼容 
性 模式 ,文件 兼容 性 能 够 在 IE 呈现 网 页 时 选择 特定 编译 模式 。 新 的 IE 为 了 确保 网 页 在 未 
来 的 版 本 中 都 有 一 致 的 外 观 ,IE 8.0 引入 了 文件 兼容 性 。 

IE 8.0 支持 几 种 文件 兼容 性 模式 ,它们 具有 不 同 的 特性 ,并 影响 内 容 显示 的 方式 。 

模式 1,Emulate IE 8. 0 模式 指示 IE 使 用 <!1DOCTYPE > 指令 来 决定 如 何 编译 内 容 。 
Standards mode 指令 会 显示 成 IE 8. 0 Standards mode; 而 quirks mode 会 显示 成 IE 5.0 
mode。 不 同 于 IE 8.0 mode,Emulate IE 8.0 mode 重视 <1DOCTYPE > 指令 。 

模式 2,Emulate IE 7. 0 模式 指示 IE 使 用 <!1DOCTYPE > 指令 来 决定 如 何 编译 内 容 。 
Standards mode 指令 会 显示 成 IE 7. 0 Standards mode; 而 quirks mode 会 显示 成 IE 5.0 
mode。 不 同 于 IE 7.0 mode,Emulate IE 7.0 mode 重视 <!1DOCTYPE > 指令 。 对 于 许多 网 
页 来 说 ,这 是 最 推荐 的 兼容 性 模式 。 

模式 3,IE 5. 0 模式 编译 内 容 如 同 IE 7.0 的 quirks mode 显示 状况 ,和 IE 5.0 中 显示 的 
非常 类 似 。 

模式 4,IE 7.0 模式 编译 内 容 如 同 IE 7.0 的 standards mode 显示 状况 ,无 论 网 页 是 否 
含有 <!DOCTYPE > 指令 。 

模式 5,IE 8.0 模式 提供 对 业界 标准 的 最 高 支持 ,包含 W3C Cascading Style Sheets 
Level 2. 1 Specification 和 W3C Selectors API. 并 有 限 地 支持 W3C Cascading Style Sheets 
Level 3 Specification (Working Draft) 。 

模式 6,Edge 模式 指示 IE 以 目前 可 用 的 最 高 模式 显示 内 容 。 当 使 用 IE 8.0 时 ,其 等 同 
于 IE 8.0 模式 。 若 (假定 ) 未 来 放出 支持 更 高 兼容 性 模式 的 IE, 使 用 Edge mode 的 页 面 会 
使 用 该 版 本 能 支持 的 最 高 模式 来 显示 内 容 。 同 样 的 那些 页 面 在 使 用 IE 8.0 浏览 时 仍 会 
照常 显示 。 

【 例 2-2〗 浏览 器 兼容 性 设置 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-2. HTML ,设置 


为 起 始 页 。 
第 2 步 ,在 Ex2-2. HTML 文件 中 ,添加 代码 : 
<HITML > 
<head > 
<! -- Mimic Internet Explorer 7 一 一 > 


<Meta http— equiv= "X— UA— Compatible" content = "IE = EmulateIE7" /> 
<title> My Web Page </title> 

</head> 

<body> 

<p> Content goes here.</p> 

</body> 

</HTML > 
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2.2.2 文本 标签 


1. 标题 文字 标签 < hl > 一 < h6 > 

HTML 文件 中 包含 各 种 级 别 的 标题 ,它们 是 由 < hl > 到 < h6 > 标签 来 定义 的 。 其 中 ， 
< hl> 代 表 1 级 标题 ,级 别 最 高 ,文字 也 最 大 ,其 他 标签 依次 递减 ,< h6 > 级 别 最 低 。 

【语法 】 

< hl > 一 级 标题 </hl > 

<h2 > 二 级 标题 </h2 > 

< h3 > 三 级 标题 </h3 > 

< h4 > 四 级 标题 </h4 > 

<h5 > 五 级 标题 </h5 > 

<h6 > 六 级 标题 </h6 > 

从 一 级 标题 到 六 级 标题 ,是 6 个 级 别 的 标题 ,标题 的 字体 大 小 依次 递减 。 

2. 文字 格式 标签 < font > 

<font > 标签 用 来 控制 文字 的 字体 .字号 和 颜色 等 属性 ,设置 不 同 的 文字 效果 , 它 是 
HTML 中 最 基本 的 标签 之 一 。 

【语法 】 

< font face= "字体 1, 字 体 2, …"” size = "字号 " color = "颜色 "> 具体 的 文字 </font> 

通过 face 属性 ,可 以 设置 文字 的 字体 样式 。 需 要 注意 的 是 ,设置 的 字体 样式 必须 是 用 
户 系统 中 已 经 安装 的 才 可 以 正确 浏览 ,否则 这 些 特 殊 字 体会 被 默认 字体 替代 。 因 此 ,最 好 使 
用 系统 默认 情况 下 都 包含 的 宋体 .黑体 等 几 种 基本 字体 。face 属性 的 值 可 以 是 一 个 或 多 个 ， 
默认 情况 下 ,使 用 第 1 种 字体 进行 显示 ; 如 果 第 1 种 字体 不 存在 , 则 用 第 2 种 字体 进行 代 
蔡 , 以 此 类 推 。 

通过 size 属性 ,可 以 设置 font 元 素 中 文本 的 字号 ,其 语法 为 < font size 一 "字号 ">。 字 
号 的 取 值 可 以 为 1 一 7 ,数值 越 大 ,字体 越 大 ,浏览 器 默认 值 是 3。 这 个 功能 可 以 用 CSS 代 
替 , 其 语法 为 <p style 二 "font-size:20px">, 具 体 使 用 参见 第 3 章 。 

color 属性 规定 font 元 素 中 文本 的 颜色 。 其 语法 为 < font color 二 “颜色 ”>, 颜 色 可 以 有 
3 种 方法 : 

方法 1: color_name 规定 颜色 值 为 颜色 名 称 的 文本 颜色 (如 red)。W3C 的 HTML 4.0 
标准 仅 支 持 16 种 颜色 名 ,它们 是 : aqua、 black、 blue、 fuchsia、 gray、 green、 lime、 maroon、 
navy ,olive purple\red silver teal .white yellow 。 

方法 2: rgb_number 规定 颜色 值 为 rgb 代码 的 文本 颜色 (如 “rgb(255.0,0)”) 。 

这 个 功能 可 以 用 CSS 代替 ,其 语法 为 <p style= "color:red">, 具 体 使 用 参见 第 3 章 。 

方法 3: hex_number 规定 颜色 值 为 十 六 进 制 值 的 文本 颜色 (如 #ft0000)。 用 法 RGB() 
函数 使 用 下 述 公式 计算 表示 颜色 的 长 整数 : 

65536X Bluet+ 256X Green 十 Red 

各 分 量 中 ,数值 越 小 ,亮度 越 低 ; 数值 越 大 ,亮度 越 高 。 例 如 ,RGB (0,0,0) 为 黑色 (亮度 最 

低 ),RGB (255,255,255 ) 为 白色 (亮度 最 高 )。 白 色 对 应 的 十 六 进 制 值 的 计算 过 程 为 : 
65536X255 十 256X255 十 255 一 16777215(D) 
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= FFFFFF(H) 
使 用 过 程 如 : 
<font face = "黑体 " size = "7" color = " 间 了 E0000"> 字 体 为 黑体 、 字 号 为 7、 颜色 为 红色 </font > 
3. 段落 标签 <p > 


段落 标签 < p > 的 作用 是 划分 段落 。 使 用 时 ,可 以 省 略 结束 标签 </p >。 

【语法 】 

<p> 段 落 文字 </p> 

可 以 使 用 < p>,</p > 来 包含 一 个 段落 。 也 可 以 使 用 单独 的 开始 标签 < p > 来 划分 段落 ,每 
一 个 新 的 段落 标签 开始 的 同时 ,也 意味 着 上 一 个 段落 的 结束 。 与 < p > 相关 的 标签 还 有 < div >， 
< span >。 

4. 水 平 线 标签 < hr > 

水 平 线 标签 < hr > 的 作用 是 在 网 页 中 创建 一 条 水 平 线 。< hr > 是 一 个 单 标 签 ,没有 结束 
标签 。 

【 话 法 】 

<hr /> 


在 网 页 中 输入 一 个 < hr />, 就 添加 了 一 条 默认 样式 的 水 平 线 。 

5. 换行 标签 < br > 

换行 标签 < br > 的 作用 是 在 不 另 起 一 段 的 情况 下 ,将 当前 文本 强制 换行 。< br > 是 一 个 
单 标签 ,没有 结束 标签 。 

【 话 法】 

<br /> 


一 个 < br /> 代表 一 个 换行 ,连续 的 多 个 < br /> 可 以 实现 多 次 换行 。 

6. 空格 

在 网 页 中 输入 文字 时 ,文字 之 间 的 多 个 连续 的 半角 空格 仅 当 一 个 来 对 待 。 如 果 需 要 保 
留 空格 的 效果 ,一般 需要 使 用 全 角 空 格 ,或 者 通过 空格 代码 来 实现 。 

【语法 】 

Snbsp; 


一 个 &nbsp; 代表 一 个 半角 空格 ,连续 的 多 个 &nbsp; 就 是 多 个 空格 。 
7. 特殊 字符 
除了 空格 以 外 ,还 有 一 些 特殊 符号 也 需要 用 代码 来 代替 。 一 般 情 况 下 ,特殊 符号 的 代码 
由 前 级 “&.”、 字 符 名 称 和 后 级 *;” 组 成 。 其 使 用 方法 与 空格 符号 类 似 , 具 体内 容 见 表 2-3。 
表 2-3 特殊 符号 的 表示 
符 ”号 符号 代码 说 明 


R& quot; 双 引 号 
去 Blt; 左 尖 括号 
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续 表 
符 号 符号 代码 说 明 

> Bgt; 右 尖 括号 

& & amp; 人 & 符号 

x Btimes; 乘 号 

二 & divide; 除 号 

© Bcopy; 版 权 符 号 

® Breg; 已 注册 商标 符号 
TM Btrade; 商标 符号 

所 Beuro; 欧元 符号 

于 Byen; 日 元 符合 








2.2.3 列表 标签 


1. 定义 列表 

HTML 用 < dl >,< dt > 和 < dd > 标签 来 创建 一 个 普通 的 定义 列表 ,其 中 < dl > 标签 定义 
了 定义 列表 (definition list) ,< dt > 标签 创建 列表 中 的 上 层 项 目 ,< dd > 标签 创建 列表 中 的 最 
下 层 项 目 。 自 定义 列表 不 仅仅 是 一 列 项 目 ,而 是 项 目 及 其 注释 的 组 合 。 

【 话 法 】 


<dl> 
<dt> (定义 列表 中 的 项 目 )</dt> 
<dd> (描述 列表 中 的 项 目 )</dd> 


<dt> (定义 列表 中 的 项 目 )</dt> 
<dd> (描述 列表 中 的 项 目 )</dd> 
</dl> 


【 例 2-3】 个 人 信息 的 自 定义 列表 。 
第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-3. HTML, 设 置 
为 起 始 页 ,添加 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head > 
< Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
<dl> 
<dt> 姓 名 </dt > 
<dd> 张 三 </dd> 
<dt> 性 别 </dt > 
<dd> 男 </dd> 
<dt>0Q0</dt> 
<dd>3445566 </dd> 
</dl> 
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</body> 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 2-4 所 示 的 结果 。 





3445566 








2-4” 自 定义 列表 实例 


2. 无 序列 表 

无 序列 表 是 一 个 项 目 列表 ,此 列 项 目 使 用 粗 体 圆 点 (典型 的 小 黑 圆 圈 ) 进 行 标记 。 
【语法 】 

<ul> 


< 1i> 列 表 项 </1i> 


< > 列表 项 </1i> 

</ul> 
其 中 ,li 是 list item 的 缩写 , 即 列表 项 目 。 

【 例 2-4】 无 序 的 人 员 列 表 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-4. HTML ,设置 
为 起 始 页 ,添加 代码 : 

<!DOCTYPE HTML > 

< HTML xmlns = "http://www. w3. org/1999/xHTML"> 

< head > 


<Meta http - equiv = "Content - TYpe"”content = "text/HTML; charset = utf ~ 8"/> 
<title></title> 





</head> 
<body> 
<ul> 
<1i> 张 三 </1i> 
<1i> 李 四 </1i> 
</ul> 
</body> 
aig 
第 2 步 ,运行 程序 ,得 到 如 图 2-5 所 示 的 结果 。 
3. 有 序列 表 图 2-5 无 序列 表 实例 
有 序列 表 也 是 一 列 项 目 , 列 表 项 目 使 用 数字 进行 标记 ,常常 用 于 文章 标题 列表 排版 ,或 
者 图 片 列表 排版 布局 。 
【 话 法 】 
<ol> 


< 1i> 列 表 项 </1i> 
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<1i> 列 表 项 </1i> 
</ol > 


ol 标签 下 不 能 直接 放 内 容 或 其 他 标签 ,即使 要 放 , 都 必须 放 入 ii 标签 内 ,而 1i 标 签 内 可 
以 再 放 ul 或 ol 等 标签 。 无 序列 表 和 有 序列 表 分 别 与 Microsoft Word 中 的 项 目 符号 和 编号 
对 应 。 它 们 的 含义 是 一 样 的 。 

【 例 2-5】 有 序 的 人 员 列表 。 

第 1 步 , 在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-5. HTML ,设置 
为 起 始 页 ,添加 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf — 8"/> 
<title></title> 
</head> 
<body> 
<ol> 
<1i> 张 三 </1i> 
<1i> 李 四 </1i> 
</ol> 
</body> 
</HTML > 
1. 张 三 
第 2 步 ,运行 程序 ,得 到 如 图 2-6 所 示 的 结果 。 2. 李 四 
不 同类 型 的 有 序列 表 , 序 号 可 以 表示 为 大 写字 母 .小 写字 母 .大 写 罗 
马 数字 ,小写 罗马 数字 和 数字 列表 。 
【语法 】 


图 2-6 有 序列 表 
实例 


< ol type= "value"> 
<1i> 列 表 项 </1i> 


<1i> 列 表 项 </1i> 
</ol> 


其 中 ,value 取 值 为 A,a,I 和 ji, 分 别 表 示 大 写字 母 , 小 写字 母 , 大 写 罗 马 数字 、 小 写 罗 马 数字 。 
【 例 2-6】 不 同类 型 的 有 序列 表 实 例 。 
第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-6. HTML, 设 置 
为 起 始 页 ,添加 代码 : 


<HIML > 
<body> 
< h4 > 数字 列表 : </h4 > 
<ol> 

<1i> 苹 果 </1i> 

<1i> 香 蕉 </1i> 
</ol> 


<h4 > 大 写字 母 列 表 : </h4> 
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<ol type= "A"> 一 
< 1i> 苹 果 </1i> 数字 列表 : 
< 1i> 香 蕉 </1i> 1， 革 四 
</ol > 2， 香 莫 
中 大 写字 母 列 表 ， 
ype= "a"> 
<1i> 苹 果 </1i> A， 苹 具 
< 1i> 香 蕉 </1i> B。 香 莱 
</ol> 
<h4> 大 写 罗马 数字 列表 : </h4> 15 
<ol type= "I"> a， 革 上 
<1i> 苹 果 </1i> b， 香 莫 
i 大 写 罗马 数字 列表 ， 
<1i> 柠 榜 </1i> 要 
<1i> 桔 子 </1i> 证 疼 归 
</ol > III， 襟 覃 
< h4 > 小 写 罗马 数字 列表 : </h4 > IY， 桔子 
<ol type= "i"> ES 
<1i> 苹 果 </1i> 小 写 罗马 数字 列表 : 
<1i> 香 敬 </1i> i。 苹果 
</ol> ii。 香 基 
</body> “ 
</HTML> 图 2-7 不 同类 型 的 有 序列 表 实例 


第 2 步 ,运行 程序 ,得 到 如 图 2-7 所 示 的 结果 。 
2.2.4 表格 标签 


制作 网 页 时 ,需要 设计 页 面 的 版 式 或 设计 页 面 布局 ,以 便 阅 读 网 页 和 保持 页 面 美观 。 综 
合 考虑 安排 的 页 面 信息 ,包括 导航 文字 、 图 像 .动画 等 。 网 页 制作 者 可 以 将 任何 网 页 元 素 放 
进 HTML 的 表格 单元 格 中 ,定义 表格 常常 会 用 到 表 2-4 所 示 的 标记 。 
表 2-4 表格 常用 元 素 标签 及 说 明 





























标 签 说 明 
<table> 表格 标记 
<tr> 行 标记 
<td> 表格 数据 
<th> 表 头 标记 
<caption> 表格 标题 
<thead> 表 头 行 
<tbody> 表 主 题 
<tfoot> 表 脚 注 


1. 插 人 表格 < table > 
在 HTML 中 ,只 要 在 需要 使 用 表格 的 地 方 插入 成 对 的 < table ></table > 标记 ,就 可 以 
简单 地 完成 表格 的 插入 。 
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【 话 法 】 


<table> 
<tr><td>…</td></tr> 


</table> 
2. 设置 表格 标题 < caption > 


一 般 而 言 ,表格 都 需要 一 个 标题 对 表格 内 容 进行 简单 说 明 。 在 HTML 文件 中 ,使 用 成 
对 的 标记 < caption ></caption > 插入 表格 标题 ,该 标题 应 用 于 < table > 标记 与 < tr > 标记 之 间 


的 任何 位 置 。 


【语法 】 


<table> 
< caption> 插 人 表格 标题 </caption> 


<tr>…</tr> 


</table> 


【 例 2-7】 创建 一 个 有 标题 的 表格 。 
第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-7. HTML ,设置 
为 起 始 页 ,添加 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www.w3.org/1999/xHTML"> 
<head> 
< Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
<table> 
< caption> 点 名 册 </caption> 
<tr><th> 学 号 </th><th> 姓 名 </th></tr> 
<tr><td> 0001</td>< td> 张 三 </td></tr> 






































<tr><td> 0002</td>< td> 李 四 </td></tr> 点 名 册 
</table> 了 浮 号 姓名 | 
< 0001 | 与 三 
ek 0002| 李 四 
第 2 步 ,运行 程序 ,得 到 如 图 2-8 所 示 的 结果 。 国 28 > 和 村 司 的 玉 格 


3. 设置 表格 表 头 < th > 
制作 表格 时 ,常常 需要 制作 表 头 ,将 表格 中 的 元 素 属性 分 类 ,在 网 页 文件 中 插入 表格 并 
需要 给 表格 定义 表 头 内 容 时 ,使 用 成 对 的 < th ></th > 标记 就 可 以 实现 , 表 头 内 容 使 用 的 是 
粗 体 样 式 显示 ,位 于 < tr > 和 </tr > 之 间 。 
【 话 法 】 
<table> 

<tr><th>…</th></tr> 
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<tr><td>…</td></tr> 


</table> 


4. 插 人 行 <tr> 
<tr> 标 签 定义 HTML 表格 中 的 行 。tr 元 素 包 含 一 个 或 多 个 th 或 td 元素。 
【语法 】 


<table> 
< tr>…</tr> 
<tr>…</tr> 


</table> 


5. 插入 单元 格 数据 < td > 

< td > 标签 定义 HTML 表格 中 的 标准 单元 格 。HTML 表格 有 两 类 单元 格 : 表 头 单 
元 一 一 包含 头 部 信息 (由 th 元 素 创建 ); 标准 单元 一 一 包含 数据 (由 td 元 素 创 建 ) 。 

td 元素 中 的 文本 一 般 显示 为 正常 字体 , 且 左 对 齐 。 

【语法 】 


<table> 
<tr><th>…</th></tr> 
<tr><td>…</td></tr> 


</table> 


<td> 标签 有 两 个 重要 的 属性 ,跨行 rowspan 和 跨 列 colspan 属性 ,单位 是 行 或 列 数目 。 

【 例 2-8】 创建 一 个 跨行 和 路 列 的 表格 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-8. HTML ,设置 
为 起 始 页 ,添加 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
< table border = "1"> 
<tr>< td colspan = "3"> 关 于 跨行 和 跨 列 的 例子 </tr> 
<tr> 
<th> Month</th> 
<th> Savings </th> 
</tr> 
<tr> 
<td> January </td> 
<td>$ 100.00</td> 
<td rowspan = "2">$ 50 </td> 
</tr> 
<tr> 
< td> February </td> 
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<td>$10.00</td> 
</tr> 
<tr> 
<td> February </td> 
<td>$10.00</td> 
Rt i 
Stable> Month ||Savings 
</body> Tanuary li100.00 (50 
</HTML> February||$10, 00 
Februaryl|$10, 00 























第 2 步 ,运行 程序 ,得 到 如 图 2-9 所 示 的 结果 。 

6. 设置 划分 结构 表格 < thead >< tbody >< tfoot > 图 29 有 跨行 和 跨 列 的 表格 

为 了 让 大 表格 (table) 在 下 载 的 时 候 可 以 分 段 显 示 。 就 是 说 在 浏览 器 解析 HTML 时 ， 
table 是 作为 一 个 整体 解释 的 ,使 用 tbody 可 以 优化 显示 。 如 果 表 格 很 长 ,用 tbody 分 段 ,可 
以 一 部 分 一 部 分 地 划分 结构 显示 ,不 用 等 整个 表格 都 下 载 完成 。 下 载 一 块 显示 一 块 ,表格 巨 
大 时 有 比较 好 的 效果 。 所 谓 划分 结构 表格 , 指 将 一 个 表格 分 成 3 个 部 分 在 网 页 上 显示 ,分别 
使 用 < thead ></thead >、< tbody ></tbody >、< tfoot ></tfoot > 标记 。 

【 话 法 】 

<table> 

<thead></thead> 

< tbody ></tbody > 

<tfoot ></tfoot > 

</table> 

<thead ></thead > 定义 一 组 表 头 行 ; < tbody ></tbody > 定义 表格 主体 部 分 ; < tfoot > 
</tfoot > 定义 表格 的 页 脚 ( 脚 注 或 表 注 )。 该 标签 用 于 组 合 HTML 表格 中 的 表 注 内 容 。 

thead ,tfoot 以 及 tbody 元 素 能 对 表格 中 的 行进 行 分 组 。 当 创建 某 个 表格 时 ,希望 拥有 
一 个 标题 行 ,一些 带 有 数据 的 行 ,以 及 位 于 底部 的 一 个 总 计 行 。 这 种 划分 使 浏览 器 有 人 能力 支 
持 独 立 于 表格 标题 和 页 脚 的 表格 正文 滚动 。 当 长 的 表格 被 打印 时 ,表格 的 表 头 和 页 脚 可 被 
打印 在 包含 表格 数据 的 每 张 页 面 上 。 

表格 行 本 来 是 从 上 向 下 显示 的 。 但 是 ,应 用 了 thead/tbody/tfoot 以 后 ,就 从头 到 脚 ” 
显示 ,不 管 行 代码 顺序 如 何 。 也 就 是 说 ,如 果 thead 写 在 了 tbody 的 后 面 ,HTML 显示 时 ， 
还 是 先 显 示 thead, 后 显示 tbody。 


2.2.5 超 链接 标签 


超 链接 是 网 页 中 最 重要 的 元 素 之 一 。 通 过 超 链接 的 方式 ,可 以 使 各 个 网 页 之 间 进 行 连 
接 , 使 网 站 中 的 众多 页 面 构成 一 个 有 机 整体 。 几 乎 可 以 在 所 有 的 网 页 中 找到 链接 , 单 击 链接 
可 以 从 一 个 页 面 跳 转 到 另 一 个 页 面 。 超 链接 可 以 是 一 个 字 ,一 个 词 ,或 者 一 组 词 , 也 可 以 是 
一 幅 图 像 ,可 以 单 击 这 些 内 容 跳 转 到 新 的 页 面 或 者 当前 页 面 中 的 某 个 部 分 。 通 过 使 用 < a> 
标签 ,在 HTML 中 创建 超 链接 。 超 链接 可 以 是 文本 链接 、 图 像 链 接 , 也 可 以 是 脚本 链接 、 空 
链接 。 

1. 文本 链接 

网 页 中 最 常见 的 超 链接 是 文本 链接 , 它 通过 设置 网 页 中 的 文字 和 其 他 的 文件 进行 链接 。 
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是 跳 


【语法 】 

<a href = "链接 地 址 " target = "目标 窗口 的 打开 方式 "> 链接 文字 </a> 

【说 明 】 

通过 href 属性 ,可 以 设置 链接 地 址 。 链 接地 址 可 以 是 同一 个 网 站 的 内 部 链接 ,也 可 以 
转 到 其 他 网 站 的 外 部 链接 ,如 某 个 网 站 地 址 、FTP 地 址 .E-mail 地 址 、 下 载 文 件 地 址 等 。 
通过 target 属性 ,可 以 设置 目标 窗口 的 打开 方式 。target 的 取 值 有 4 种 , 见 表 2-5。 


表 2-5 target 值 与 其 对 应 的 含义 




















target 值 目标 窗口 的 打开 方式 
_parent 在 上 一 级 窗口 打开 , 常 在 分 帧 的 框架 页 面 中 使 用 
_blank 新 建 一 个 窗口 打开 
_self 在 同一 窗口 打开 ,与 默认 设置 相同 
_top 在 浏览 器 的 整个 窗口 中 打开 ,将 会 忽略 所 有 的 框架 结构 
使 用 过 程 ,如 : 
<a href = "http://www. baidu. com/" target = "_blank"> 百 度 </a> 
2. 图 像 链接 


除了 给 文字 设置 超 链 接 外 ,也 可 以 给 图 像 设 置 超 链 接 。 对 于 给 整 幅 图 像 设 置 超 链接 来 


说 ,设置 方法 比较 简单 ,与 设置 文本 链接 类 似 。 


【语法 】 

<a href = "链接 地 址 ”target = "目标 窗口 的 打开 方式 ">< img src= "图 像 文 件 的 地 址 " /></a> 

使 用 过 程 ,如 : 

<a href = "http://www. baidu. com/" target = "_ blank">< img src = "images/baidulogo. jpg" /></a> 
3. 脚本 链接 

在 链接 语句 中 ,可 以 通过 脚本 来 实现 HTML 不 能 实现 的 功能 ,这 种 链接 称 为 脚本 


链接 。 


【 话 法 】 

<a href = "javascript: 脚 本 代码 "> 文字 链接 </a> 

在 “javascript:” 后 面 添 加 的 就 是 具体 的 脚本 代码 ,可 实现 添加 收藏 夹 .关闭 窗口 等 功能 。 
使 用 过 程 ,如 : 

<a href = "javascript:window. close( )"> 关 闭 窗口 </a> 

4. 空 链接 

空 链接 是 指 单 击 该 链接 后 仍然 停留 在 当前 页 面 。 在 代码 中 ,可 以 通过 # 符 号 来 实现 空 


链接 。 


【 话 法 】 
<a href = "# "> 链接 文字 </a> 
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通过 href 属性 ,设置 其 值 为 并 实现 空 链 接 。 
使 用 过 程 , 如 : 


<a href = "#"> 空 链接 </a> 


2.2.6 ”图像 标签 


网 页 中 常见 的 图 像 格 式 有 : GIF、JPEG、PNG 等 。GIF 格式 分 为 静态 GIF 和 动画 GIF 
两 种 , 仅 支 持 256 色 , 常 用 于 导航 条 、 按 钮 ,商标 等 图 像 。 对 于 照片 之 类 的 图 像 ,通常 采用 
JPEG 格式 。PNG 格式 则 具备 了 GIF 格式 的 很 多 优点 ,同时 还 支持 48bit 的 色彩 。 

浏览 网 页 时 ,经 常 可 以 看 到 各 种 图 像 。 如 果 要 在 网 页 中 插入 图 像 , 可 以 使 用 < img > 标 
签 来 实现 ,从 而 达到 美化 页 面 的 效果 。 

【语法 】 

< img src= "图 像 文件 的 地 址 " width = "图 像 的 宽度 " height = "图 像 的 高 度 " alt = "图 像 的 描述 性 文字 " /> 

通过 src 属性 ,可 以 设置 图 像 文件 所 在 的 路 径 , 这 一 路 径 可 以 是 相对 路 径 ,也 可 以 是 绝 
对 路 径 。 

通过 width 属性 ,可 以 设置 图 像 的 宽度 。 通 过 height 属性 ,可 以 设置 图 像 的 高 度 。 默 
认 情 况 下 ,只 改变 图 像 的 宽度 或 高 度 ,图像 的 大 小 也 会 等 比例 进行 调整 。 

通过 alt 属性 ,可 以 对 图 像 进行 简单 的 文字 描述 。 浏 览 网 页 时 , 当 用 户 把 鼠标 光标 移 到 
图 像 上 方 ,浏览 器 就 会 在 一 个 文本 框 中 显示 图 像 的 描述 性 文字 。 如 果 无 法 显示 图 像 , 则 直接 
显示 描述 性 文字 。 使 用 过 程 ,如 : 


< img src = "images/book. jpg" width = "130" height = "200" alt = "计算 机 教材 " /> 


2.2.7 背景 声音 标签 

BGSound 标签 是 Internet Explorer 的 专用 标签 ,打开 网 页 的 时 候 自 动 播放 背景 音乐 。 

【语法 】 

< BGSound SRC = url Loop = nl BALANCE = n2 VOLUME = n3 > 

BGSound 是 BackGround Sound 的 缩写 。 

BALANCE 调整 左右 声 道 的 音量 平衡 , 取 值 范围 为 一 10000 一 10000, 指 定 播放 回 数 。 
Loop 设置 播放 的 次 数 , 当 指定 为 infinite 或 一 1 时 ,无 限 循环 播放 。SRC 指定 音乐 文件 , 支 
持 *.wav,x.auyx*.mid,*.aif 等 格式 。VOLUME, 调 整 音 量 , 取 值 范 围 为 一 10000 一 0。0 是 
最 大 音量 。 

使 用 过 程 ,如 : 


< bgsound loop = "infinite" src = "sound/xxx.mid"> 
2.2.8 视频 标签 
网 页 中 常见 的 多 媒体 文件 包括 动画 文件 .音频 文件 .视频 文 件 等 。 如 果 要 正确 浏览 嵌入 
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的 这 些 网 页 ,就 需要 在 客户 端的 计算 机 中 安装 相应 的 播放 软件 ,使 用 < embed > 标签 可 以 将 
多 媒体 文件 谋 入 到 网 页 中 。 

【语法 】 

<embed src= "多 媒体 文件 的 地 址 ”width= "嵌入 内 容 的 宽度 ”height = " 伐 入 内 容 的 高 度 " /> 


通过 src 属性 ,可 以 设置 多 媒体 文件 所 在 的 路 径 ,这 一 路 径 可 以 是 相对 路 径 , 也 可 以 是 
绝对 路 径 。 通 过 width 属性 ,可 以 设置 嵌入 内 容 的 宽度 。 通 过 height 属性 ,可 以 设置 嵌入 
内 容 的 高 度 。 使 用 过 程 ,如 : 


< embed src = "video/demo.avi" width= "400" height = "300" /> 


2.3 网 页 表单 和 控件 


2.3.1 表单 标签 < form > 


表单 (form) 用 于 从 用 户 ( 站 点 访问 点 ) 收 集 信 息 , 然 后 将 这 些 信息 提交 给 服务 器 进行 处 
理 ,并 将 处 理 后 的 结果 返回 ,常用 于 实现 动态 网 页 中 的 内 容 交 互 。 表 单 的 使 用 包含 两 个 部 
分 : 一 是 用 户 界面 ,提供 用 户 输入 数据 的 元 件 ; 二 是 处 理 程序 ,可 以 是 客户 端 程序 ,在 浏览 
器 中 执行 ,也 可 以 是 服务 器 处 理 程序 ,处 理 用 户 提交 的 数据 ,返回 结果 。 例 如 ,网 页 中 常见 的 
用 户 登 录 、 用 户 注 册 、 信 息 查 询 等 。 表 单 中 可 以 包含 允许 用 户 进行 交互 的 各 种 控件 ,如 文本 
框 \ 列 表 框 、 复 选 框 和 单 选 按 钮 等 。 用 户 在 表单 中 输入 或 选择 数据 之 后 提交 ,该 数据 就 会 送 
交 给 表单 处 理 程序 进行 处 理 。 

【 话 法 】 

< form action = "表单 的 处 理 程序 " method = "传送 方式 " target = "窗口 的 位 置 "enctype = "编码 方 

式 " > 

<! -- 表单 控件 --> 


</form > 


通过 action 属性 ,可 以 指定 表单 的 处 理 程序 ,可 以 是 程序 或 脚本 的 一 个 完整 URL。 

通过 method 属性 ,可 以 定义 处 理 程序 从 表单 中 获取 信息 的 方式 ,决定 了 表单 中 已 收集 
的 数据 用 什么 方法 发 送 到 服务 器 。 传 送 方式 的 取 值 有 两 种 , 即 get 或 post。 当 使 用 get 时 ， 
表单 数据 会 附加 在 URL 之 后 ,由 客户 端 直接 发 送 至 服务 器 ,因此 速度 比 post 快 ,但 缺点 是 ， 
数据 长 度 有 限制 , 且 保 密 性 差 ,信用 卡号 或 其 他 机 密 信息 时 ,不 要 使 用 get 方法 ,而 应 使 用 
post 方法 。 当 使 用 post 时 ,表单 数据 和 URL 是 分 开发 送 的 ,客户 端的 计算 机 会 通知 服务 器 
来 读 取 数据 ,因此 通常 没有 数据 长 度 上 的 限制 。 在 没有 指定 method 值 的 情况 下 ,默认 为 
get。 若 要 使 用 get 方法 发 送 ,URL 的 长 度 应 限制 在 8192 个 字符 内 。 如 果 发 送 的 数据 量 太 
大 ,数据 将 被 截断 ,从 而 导致 意外 的 或 失败 的 处 理 结果 。 

Target 一 目标 窗口 。 其 取 值 如 下 : _blank, 在 未 命名 的 新 窗口 中 打开 目标 文档 ; 
_parent, 在 当前 文档 窗口 的 父 窗 口中 打开 目标 文档 ; _self, 在 提交 表单 所 使 用 的 窗口 中 打 
开 目 标 文 档 ; _top, 在 当前 窗口 中 打开 目标 文档 ,确保 目标 文档 占用 整个 窗口 。 
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enctype 属性 规定 在 发 送 到 服务 器 之 前 应 该 如 何 对 表单 数据 进行 编码 。Enctype 有 3 
个 取 值 : application/x-www-form-urlencoded,multipart/form-data 和 text/plain。 

默认 表单 数据 编码 为 “application/x-www-form-urlencoded”。 也 就 是 说 ,在 发 送 到 服 
务 器 之 前 ,所 有 字符 都 会 进行 编码 (空格 转换 为 “十 ”, 特 殊 符 号 转换 为 ASCII 十 六 进 
制 值 ) 。 

multipart/form-data, 不 对 字符 编码 。 在 使 用 包含 文件 上 传 控 件 的 表单 时 ,必须 使 用 
该 值 。 

text/plain, 空 格 转换 为 “十 ”, 但 不 对 特殊 字符 编码 。 

一 个 网 页 中 可 以 创建 多 个 表单 ,每 个 表单 可 以 包含 各 种 各 样 的 控件 ,如 文本 框 . 单 选 按 
钮 、 复 选 框 、 下 拉 菜 单 以 及 按钮 等 。 

【 例 2-9】 表单 使 用 实例 。 

第 1 步 , 在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-9. HTML ,设置 
为 起 始 页 ,添加 代码 : 


<!DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
<formaction= "form action.asp" method= "post" target =" "> 
用 户 名 : < input type = "text" name = "user" /><br /> 
密码 : < input type = "password" name = "password" /><br /> 


< input type = "submit"” value = "确定 " /> 用 户 名 : 


a 


</HTML > 
_ 图 2-10 程序 运行 界面 
第 2 步 ,运行 程序 ,得 到 如 图 2-10 所 示 的 界面 。 


2.3.2 表单 的 控件 


在 网 页 表单 中 ,输入 类 的 控件 一 般 以 < input > 标签 开始 ,说 明 这 一 控件 需要 用 户 的 输 
入 。< input > 标签 是 最 常用 的 控件 标签 ,包括 最 常见 的 文本 框 \ 提 交 按 钮 等 都 采用 这 个 标 
签 。 菜 单列 表 类 控件 则 以 < select > 开始 ,表示 需要 用 户 选择 。 除 此 之 外 ,还 有 一 些 其 他 控 
件 , 它 们 有 自己 的 特定 标签 ,如 文本 域 标签 < textarea >。 

【语法 】 





< inputname = "控件 名 称 "type= "控件 类 型 "/> 


通过 name 属性 ,可 以 指定 控件 名 称 ,便于 程序 对 不 同 控件 进行 区 分 。 
通过 type 属性 ,可 以 定义 控件 类 型 。type 属性 的 取 值 有 多 种 , 见 表 2-6。 
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表 2-6 type 值 与 其 对 应 的 含义 



































type 值 含 义 
text 文本 框 
password 密码 框 ,用 户 在 页 面 中 输入 时 不 显示 具体 内 容 ,都 以 “* ”代替 
radio 单 选 按钮 
checkbox 复 选 框 
button 普通 按钮 
submit 提交 按钮 
reset 重 置 按钮 
image 图 像 域 ,也 称 为 图 像 提 交 按 钮 
hidden 隐藏 域 ,其 并 不 显示 在 页 面 上 ,只 将 内 容 传 递 到 服务 器 中 
file 文件 域 
下 面 简 要 介绍 几 种 常用 的 表单 控件 。 
1) 文本 框 和 密码 框 
当 用 户 要 在 表单 中 键入 字母 .数字 等 内 容 时 ,就 会 用 到 文本 框 。 


【 话 法 】 
< Input Type = "text" 属 性 = " 值 "… 事 件 = "代码" …> 


文本 框 的 主要 属性 : 

Name 一 单行 文本 框 的 名 称 ,通过 它 , 可 以 在 脚本 中 引用 该 文本 框 控件 。 

Value 二 文本 框 的 值 ; 

DefaultValue 王 文本 框 的 初始 值 ; 

Size 一 文本 框 的 宽度 (字符 数 ); 

MaxLength 王 允许 在 文本 框 内 输入 的 最 大 字符 数 。 

用 户 输 入 的 字符 数 可 以 超过 文本 框 的 宽度 ,这 时 系统 会 将 其 滚动 显示 ,但 输入 的 字符 数 
不 能 超过 设置 的 最 大 字符 数 。 当 type= "password" 时 ,用 户 输入 的 文本 以 * 呈现 ,用 于 输 
入 用 户 密码 。 

文本 框 的 主要 方法 : 

Click() , 单 击 该 文本 框 。 

Focus() ,得 到 焦点 。 

Blur( ) ,失去 焦点 。 

Select() ,选择 文本 框 的 内 容 。 

文本 框 的 主要 事件 : 

OnClick 一 单 击 该 文本 框 执行 的 代码 。 

OnBlur 二 失去 焦点 执行 的 代码 。 

OnChange 一 内容 变化 执行 的 代码 。 

OnFocus 王 得 到 焦点 执行 的 代码 。 

OnSelect 二 选择 内 容 执行 的 代码 。 

使 用 过 程 ,如 : 
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< input type = "text" name = "URL" size= "20" maxlength= "50" value= "http://" /> 

< input type = "password" name = "password" size= "20" maxlength= "8" /> 

2) 普通 按钮 .提交 按钮 、 复 位 按钮 

使 用 Input 标记 可 以 在 表单 中 添加 3 种 类 型 的 按钮 : 提交 按钮 . 重 置 按钮 和 自 定义 按 
钮 。 创 建 按钮 的 方法 如 下 : 


< Input TYpe = "submit|reset|button" 属性 = " 值 "… OncClick = "代码 "> 


按钮 的 主要 属性 : 

Type 王 submit 创建 一 个 提交 按钮 。 在 表单 中 添加 提交 按钮 后 ,站 点 访问 者 就 可 以 在 提 
交 表 单 时 ,将 表单 数据 (包括 提交 按钮 的 名 称 和 值 ) 以 ASCII 文本 形式 传送 到 由 表单 的 
Action 属性 指定 的 表单 处 理 程序 。 一 般 来 说 ,表单 中 必须 有 一 个 提交 按钮 。 

Type 一 reset 创建 一 个 重 置 按钮 。 单 击 该 按钮 时 ,将 删除 任何 已 经 输入 到 域 中 的 文本 ， 
并 清除 所 做 的 任何 选择 。 但 是 ,如 果 框 中 含有 默认 文本 或 选项 为 默认 , 单 击 重 置 按钮 将 会 恢 
复 这 些 设 置 值 。 

Type 二 button 创建 一 个 自 定义 按钮 。 在 表单 中 添加 自 定义 按钮 时 ,为 了 赋予 按钮 某 种 
操作 ,必须 为 该 按钮 编写 脚本 。 

name 一 按钮 的 名 称 。 

value 一 显示 在 按钮 上 的 标题 文本 。 

按钮 的 主要 事件 : 

OnClick 一 单 击 按钮 执行 的 脚本 代码 。 

使 用 过 程 ,如 : 

<! -- 在 页 面 中 添加 一 个 普通 按钮 --> 

< input type = "button" value = "普通 按钮 " name = "buttom1”/> 

<! -- 在 页 面 中 添加 一 个 关闭 当前 窗口 的 按钮 -~-> 

< input type = "button" value = "关闭 当前 窗口 " name = "close" onclick = "window. close()" /> 

<! -- 在 页 面 中 添加 一 个 打开 新 窗口 的 按钮 -~-> 

< input type = "button" value = "打开 新 窗口 " name = "opennew" onclick = "window. open()" /> 

3) 单 选 按钮 

在 表单 中 添加 选项 按钮 ,可 以 让 站 点 访问 者 从 一 组 选项 中 选择 其 中 之 一 。 在 一 组 单 选 
按钮 中 ,一 次 只 能 选择 一 个 。 创 建 选项 按钮 的 方法 如 下 : 

【 话 法 】 





< Input Type = "radio" 属 性 = " 值 "… 事 件 = "代码 " …> 选 项 文本 


单 选 按钮 的 主要 属性 : 

name 一 单 选 按钮 的 名 称 ,若干 个 名 称 相 同 的 单 选 按钮 构成 一 个 控件 组 ,在 该 组 中 只 能 
选中 一 个 选项 。 

value 一 提交 时 的 值 。 

checked, 设 置 当 第 一 次 打开 表单 时 ,该 单 选 按钮 处 于 选中 状态 , 该 属性 值 是 可 选 的 。 

当 提交 表单 时 ,该 单 选 按钮 组 名 称 和 所 选取 的 单 选 按钮 指定 值 都 会 包含 在 表单 结果 中 ， 
如 果 没 有 任何 单 选 按钮 被 选取 ,组 名 称 会 被 纳入 表单 结果 中 , 值 则 为 空白 。 
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使 用 过 程 ,如 : 


< Input Type = radio Checked name = kd value = "教师 "> 教师 

< Input Type = radio name =kd value = "学 生 "> 学 生 

< Input TYpe = radio name =kd value = "公务 员 "> 公务 员 

< Input Type = radio name =kd value = "医生 "> 医生 

4) 复 选 框 

当 用 户 需 要 从 若干 给 定 的 选择 中 选取 一 个 或 若干 选项 时 ,就 会 用 到 复 选 框 。 
【 话 法 】 

< Input Type = "checkbox" 属性 = " 值 "… 事 件 = "代码 " …> 选 项 文本 


复 选 框 的 主要 属性 : 

name 二 复 选 框 的 名 称 。 

value 一 选中 时 提交 的 值 。 

checked, 设 置 当 第 一 次 打开 表单 时 ,该 复 选 框 处 于 选中 状态 。 该 复 选 框 被 选中 时 , 值 为 
true, 和 否则 为 false。 

方法 : 

Focus() ,得 到 焦点 ; Blur() ,失去 焦点 ; Click() , 单 击 该 复 选 框 。 

事件 : 

OnFocus 王 得 到 焦点 执行 的 代码 ; OnBlur 王 失去 焦点 执行 的 代码 ; OnClick 一 单 击 该 复 
选 框 执行 的 代码 。 当 提交 表单 时 ,假如 复 选 框 被 选中 , 它 的 内 部 名 称 和 值 都 会 包含 在 表单 结 
果 中 ,否则 ,只 有 名 称 会 被 纳入 表单 结果 中 , 值 则 为 空白 。 

使 用 过 程 ,如 : 

< input type = "checkbox" value = "Al1" name = "test"/> 数 学 

< input type = "checkbox" value = "A2" name = "test"/> 语 文 

< input type = "checkbox" value = "A3" name = "test"/> 英 语 

< input type = "checkbox" value = "A4" name = "test"/> 体 育 

5) 文本 区 域 

在 表单 中 添加 文本 区 域 可 以 接受 站 点 访问 者 输入 多 于 一 行 的 文本 。 创 建文 本 区 域 的 方 
法 如 下 : 


< Textarea 属性 = " 值 "… 事 件 = "代码 " …> 初 始 值 </Textarea > 


文本 区 域 的 主要 属性 : 

Name 一 滚动 文本 框 控件 名 称 。 

Rows 一 控件 的 高 度 ( 以 行为 单位 ) 。 

Cols 一 控件 的 宽度 (以 字符 为 单位 ) 。 

ReadOnly: 滚动 文本 框 的 内 容 不 能 被 用 户 修改 。 

创建 多 行文 本 框 时 ,在 < Textarea > 和 </Textarea > 标记 之 间 输 入 的 文本 将 作为 该 控件 
的 初始 值 。 它 的 其 他 属性 方法 和 相关 事件 与 单行 文本 框 基本 相同 。 当 提交 表单 时 ,该 域名 
称 和 内 容 都 会 包含 在 表单 结果 中 。 
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6) 下 拉 菜 单 

表单 中 的 选项 菜单 可 以 让 站 点 访问 者 从 列表 或 菜单 中 选择 选项 。 菜 单 中 可 以 选择 一 个 
选项 ,也 可 以 设置 为 允许 许多 重 选择 。 

【语法 】 

< Select Name = " 值 " Size = " 值 " [Multiple]> 


< Option [Selected] Value = " 值 " > 选项 1 </Option > 
< Option [Selected] Value = " 值 "> 选项 2 </Option> 


</Select> 


属性 : 

Name 王 选项 菜单 控件 名 称 。 

Size 一 在 列表 中 一 次 可 以 看 到 的 选项 数目 (默认 为 1) , 若 大 于 1, 则 相当 于 列表 框 。 

Multiple, 人 允许 作 多 项 选择 。 

Selected 王 该 选项 的 初始 状态 为 选中 。 

当 提 交 表单 时 ,菜单 的 名 称 会 被 包含 在 表单 结果 中 ,并 且 其 后 有 一 份 所 有 选项 值 的 
列表 。 

【 例 2-10】 一 个 关于 课程 的 下 拉 菜 单 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-10. HTML, 设 
置 为 起 始 页 ,添加 如 下 代码 : 


<HTML > 

<Head> 

<Title> 下 拉 菜 单 示 例 </Title> 

</Head> 

<Body> 

< Form Action = "GetCourse.asp" Method= "post"> 

< Select Name = "课程 "> 

< Option Value = "计算 机 基础 " Selected > 计算 机 基础 </Option> 

< Option Value= "C 语言 程序 设计 "Selected>C 语言 程序 设计 </Option> 
< Option Value = "数据 结构 ”Selected > 数据 结构 </Option > 

< Option Value = "数据 库 原理 ”Selected > 数据 库 原理 </Option> 

< Option Value = "C++ 程序 设计 "” Selected > C++ 程序 设计 </Option> 














</Select> 

</Form > 

</Body> 

JEP 5 和 FRI “v 
第 2 步 , 运 行程 序 , 得 到 如 图 2-11 所 示 的 结果 。 图 2-11 运行 结果 
7) 文件 域 


文件 域 由 一 个 文本 框 和 一 个 “浏览 ”按钮 组 成 ,用 户 既 可 以 在 文本 框 中 输入 文件 的 路 径 
和 文件 名 ,也 可 以 通过 单 击 “ 浏 览 ” 按 钮 从 磁盘 上 查找 和 选择 所 需 文件 。 文 件 域 一 般 用 于 选 
择 文件 上 载 到 服务 器 。 创 建文 件 域 的 方法 如 下 : 

【语法 】 


< Input Type= "file" 属性 = " 值 "…> 
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文件 域 的 主要 属性 : 

Name 王 文件 域 的 名 称 。 

Value 王 初 始 文件 名 。 

Size 一 文件 名 输入 框 的 宽度 。 

【 例 2-11】 文件 上 传 的 例子 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-11. HTML, 设 
置 为 起 始 页 ,添加 如 下 代码 : 


<HIML> 

<Head> 

<Title > 文件 域 示例 </Title> 

</Head> 

<Body> 

< Form Action = "GetCourse.asp" Method = "post" enctype = "multipart/form - data"> 
< Table Align = center BgColor = #D6D3CE Width= 368 > 

<Tr> 

<Th ColSpan = 2 BgColor = #00034EF> 

< Font Color = 井 EFFFFF > 文件 域 </Font > 

</Th> 

</Tr> 

<Tr> 

<Td Height = 52 Align = right > 请 选择 文件 : </Td> 

<Td Height = 52 >< Input TYpe = file Name = Fl Size= 16></Td> 

</Tr > 

<Tr Align = center > 

<Td Height = 52 Align = right >< Input Type = submit Value = 提交 Name = btnSubmit ></Td> 
<Td Height = 52 >< Input TYpe = reset Value = 全 部 重 写 Name = btnReset ></Td> 
</Tr> 

</Table> 

</Form> 

</Body> 

</HTML > 


第 2 步 , 运 行程 序 , 得 到 如 图 2-12 所 示 的 结果 。 

8) 分 组 框 

使 用 FieldSet 标记 对 表单 控件 进行 分 组 ,从 而 将 表单 细 分 为 更 小 、 更 易于 管理 的 部 分 。 
FieldSet 标记 必须 以 Legend 标记 开头 ,以 指定 控件 组 的 标题 ,在 Legend 标记 之 后 可 以 跟 其 
他 表单 控件 ,也 可 以 嵌 套 FieldSet。 

【语法 】 

< 了 FieldSet > 

<Iegend> 控 件 组 标题 </Legend> 

组 内 表单 控件 

</FieldSet > 

【 例 2-12】 一 个 分 组 框 的 例子 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-12. HTML, 设 
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置 为 起 始 页 ,添加 如 下 代码 : 


<HIML> 

<Head> 

<Title > 文件 域 示例 </Title> 

</Head> 

<Body> 

<filedset > 

< legend > 用 户 登录 </legend> 

< form name = "login.asp" method= "post"> 

账号 : < input name = "UserName"></input ><br><br> 

密码 : < input type = "password" name = "UserPassword"></input ><br ><br> 
< input type = "submit" value = "登录 " name = "Submit"></input > 
< input type = "reset" value = " 重 填 " name = "Reset"></input > 
</form> 

</fieldset > 

</Body> 

</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 2-13 所 示 的 结果 。 














用 户 登 录 
账号, 
请 选择 文件 关 La sm: [一 
天 | [el EE 
图 2-12 选择 文件 图 2-13 分 组 框 显 示 效 果 


2.3.3 获取 表单 数据 


客户 端 提交 数据 后 需要 通过 Request 内 置 对 象 在 服务 端 获取 数据 。Request 对 象 功 能 
是 从 客户 端 得 到 数据 。 常 用 的 3 种 取得 数据 的 方法 是 : 

Request. Form. Get ("username" ); 

Request. QueryString("username" ); 

Request[ "username" ] . 

第 三 种 方法 是 前 两 种 方法 的 一 个 缩写 ,可 以 取代 前 两 种 情况 。 前 两 种 主要 对 应 的 
Form ,提交 时 有 两 种 方法 : 分 别 是 Post 方法 和 Get 方法 。 

当 表 单 中 的 method 的 值 为 Get 时 ,在 后 台 服 务 器 中 获取 数据 的 方法 可 以 为 Request. 
QueryString("username") 或 Request[ "username"]。 

当 method 的 值 为 Post 时 ,在 后 人 台 服 务 器 中 获取 数据 的 方法 为 Request. Form. Get 
("username") 或 Request[ "username" |]。 

表单 提交 的 数据 都 需要 控件 的 name, 使 用 控件 id 提交 后 ,将 无 法 提取 数据 。 

【 例 2-13】 表单 数据 提交 和 提取 例子 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-13. HTML, 设 
置 为 起 始 页 ,添加 如 下 代码 : 
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<!DOCTYPE HTML > 
<HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf — 8"/> 
<title></title> 
</head> 
<body> 
< form id = "Form 1" action = "Ex2 - 13.aspx" method = "post"> 
<div style = "text ~ align:center"> 
填写 用 户 信息 
<hr style= "size:50%" /> 
<div style= "text- align:left"> 
用 户 名 : < input name = "user_name" type = "text" /><br /> 
密码 : < input name = "Passwordl" type = "password" /><br /> 
确认 密码 : < input name = "Password2" type = "password" />< br /> 
性 别 : < input name = "sex" type = "radio" value = " 女 " /> 女 
< input name = "sex" type= "radio" value = " 男 " /> 男 < br /> 
上 传 照片 : < input id= "Filel" type= "file" name= "picture" /><br /> 
< input type = "submit"” value = "提交 " /> 
< input type = "reset" value= " 重 置 " /> 


</div> 
</form > 
</body> 
</HTML > 


第 2 步 ,在 HTMLWebsites 项 目 中 添加 新 项 Web 窗 体 ,命名 为 Ex2-13. aspx, 添加 
代码 : 


using System; 
using System. Collections. Generic; 
using System. Ling; 
using System. Web; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
public partial class Ex2_13: System. Web. UI. Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
Response. Write(" 利 用 Response 对 象 获取 客户 端 数据 "); 
Response. Write("< hr/>"); 
string[ ] names = Request.Form .AllKeys; 
for (int i = 0; i< names.Length; i++) 
{ 
string[ ] values = Request. Form .GetValues(i); 
for (int j = 0; j < values.Length; j++) 
Response. Write(names[i] + "=" + values[j] + "<br/>"); 
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}// 通 过 循环 表单 中 的 键 和 键 值 ,用 Response. Write 输出 


} 


第 3 步 ,运行 程序 ,得 到 如 图 2-14 所 示 的 表单 提交 数据 , 单 击 “ 提 交 ” 按 钮 ,得 到 如 图 2-15 
所 示 的 结果 。 























户 名 ; 
密码 : jeeeeee 
确认 密码 : 

性 别 : 图 女 口 男 _ 
上 传 照 片 ，0: 襄 条 编写 浙 程 序 第 2 这 | 浏览 


















图 2-14 表单 提交 数据 





利用 Response 对 象 获取 客户 端 数据 














User_name=xc 

Password1=123456 

Password2=123456 

sex 一 女 

picture=D:\ 教 材 编写 \ 源 程序 \ 第 2 章 \HtmlWebsites\images\c.jpg 


2-15 ”获取 表单 的 数据 


2.4 框架 标签 


2.4.1 帧 标记 < frame > 


帧 技术 又 称 框架 技术 。 迄 今 为 止 提 到 的 所 有 网 页 都 能 链接 到 其 他 网 页 ,但 是 每 次 只 能 
显示 一 个 网 页 ,为 了 能 够 在 同一 浏览 器 中 显示 多 个 页 面 ,必须 使 用 帧 技术 。 为 了 说 明 一 个 
HTML 文档 中 使 用 了 帧 技术 ,必须 在 文档 类 型 中 给 予 相 应 的 说 明 , 该 文档 类 型 说 明 如 下 : 
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4. 01 Frameset//EN" "http:// 
www. w3. org /TR/HTML4/loose. dtd">。 

帧 式 网 页 起 始 于 开始 标记 < frameset >。 帧 集 有 两 个 重要 属性 , 即 cols 属性 ( 列 属性 ) 和 
rows 属性 ( 行 属性 ) ,其 中 cols 属性 给 出 了 帧 集 页 面 的 纵向 布局 ,而 rows 属性 则 给 出 了 帧 集 
页 面 的 横向 布局 。 这 两 个 属性 会 指定 每 个 帧 的 宽度 ,或 像素 值 ,或 所 占 屏 幕 的 百分比 。 例 如 
<frameset cols 一 "110, * "> 告诉 浏览 器 该 网 页 有 两 个 帧 ,第 一 个 从 屏幕 左 侧 扩展 了 110 个 
像素 点 ,第 二 个 帧 填充 了 屏幕 的 剩余 部 分 。 

帧 集 标记 只 说 明 在 一 个 浏览 器 中 可 以 有 多 少 个 页 面 , 但 是 每 个 页 面 该 如 何 表达 ,是 标记 
< frameset > 无 法 实现 的 ,因此 ,在 < frameset >…</frameset > 内 必须 将 每 个 帧 的 内 容 表 达 出 
来 。HTML 是 通过 在 < frameset >…</frameset > 内 灸 嵌 < frame > 来 实现 的 。 
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【 话 法 】 
帧 标记 < frame > 的 常用 格式 为 


< frame name = "main”src = "main.HIML"> 


其 中 ,name 属性 是 标识 帧 ; src 表示 在 帧 中 建立 一 个 超 链 接 。 帧 标记 往往 与 下 面 的 格 
式 一 起 使 用 


<a href = "link. HTML", target = "main"> 


其 作用 是 在 name 属性 为 "main" 的 帧 中 加 载 页 面 link. HTML。 

< noframes >…</noframes > 标记 对 也 放 在 < frameset >…</frameset > 标记 对 之 间 , 用 
来 在 那些 不 支持 帧 的 浏览 器 中 显示 文本 或 图 像 信息 。 

【 例 2-14】 frame 标记 的 应 用 。 

第 1 步 ,在 HTMLWebsites 项 目 中 添加 新 项 HTML 文件 ,命名 为 Ex2-14. HTML, 设 
置 为 起 始 页 ,添加 代码 : 


<HTML > 

<head > 

<title> HTML 文档 链接 标记 、 帧 标记 的 演示 效果 </title> 
</head> 

< frameset cols="15% ,85% "> 

< frame src= "Ex2—1.HIML" scrolling= "no" name = "win001"> 
< frame src = "Ex2 - 2.HIML" name = "win002"> 

</frameset > 

<noframes> 


Please use a Web browser such as IE3.0 orNetscape Navigator to view this page in frames! 
</noframes > 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 2-16 所 示 的 结果 。 


这 是 一 个 Content goes here. 
HTML 文 档 

基本 标记 

演示 效果 ! 


图 2-16 运行 结果 


2.4.2 IFrame 标记 


IFrame 标记 又 称 浮 动 帧 标记 ,可 用 它 将 一 个 HTML 文档 嵌入 在 另 一 个 HTML 中 显 
示 。 它 不 同 于 Frame 标记 , Frame 最 大 的 特征 是 所 应 用 的 HTML 文件 不 是 与 另外 的 
HTML 文件 相互 独立 显示 ,而 是 可 以 直接 嵌入 在 该 HTML 文件 中 ,与 这 个 HTML 文件 内 
容 相互 融合 ,成 为 一 个 整体 ,另外 ,还 可 以 多 次 在 一 个 页 面 内 显示 同一 内 容 ,而 不 必 重 复写 内 
容 ,一 个 形象 的 比喻 即 “ 画 中 男 * 电 视 。 
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【语法 】 
< IFrame src = "URL" width = "x" height = "x" scrolling = "[OPTION]"” FrameBorder = "x"></iframe> 


src: 文件 的 路 径 , 既 可 以 是 HTML 文件 ,也 可 以 是 文本 、ASP 文件 等 。 

width height:“ 画 中 画 ” 区 域 的 宽 与 高 。 

scrolling: 当 SRC 指定 的 HTML 文件 在 指定 的 区 域 显 示 不 完 时 的 滚动 选项 ,如 果 设 置 
为 No, 则 不 出 现 滚动 条 ; 如 为 Auto, 则 自动 出 现 滚动 条 ; 如 为 Yes, 则 显示 滚动 条 。 

FrameBorder: 区 域 边框 的 宽度 ,为 了 让 “ 画 中 画 ” 与 邻近 的 内 容 相 融合 ,常设 置 为 0。 

在 脚本 语言 与 对 象 层次 中 ,包含 IFrame 的 窗口 称 为 父 窗 体 ,而 浮动 帧 则 称 为 子 窗 体 ， 
和 弄 清 这 两 者 的 关系 很 重要 ,必须 清楚 对 象 层次 ,才能 通过 程序 来 访问 并 控制 窗 体 。 

IFrame 虽然 内 由 在 另 一 个 HTML 文件 中 ,但 它 保 持 相 对 的 独立 ,是 一 个 “独立 王国 ”， 
在 HTML 中 的 特性 同样 适用 于 浮动 帧 中 。 通 过 IFrame 标记 ,可 将 那些 不 变 的 内 容 以 
IFrame 来 表示 ,不必 重复 写 相同 的 内 容 。 它 使 页 面 的 修改 更 为 方便 ,不 必 因 为 版 式 的 调整 
而 修改 每 个 页 面 ,只 需 修改 一 个 父 窗 体 的 版 式 即 可 。 例 如 : 


< IFrame src = frame. htm width = "400" height = "200" scrolling = "auto" frameborder = "1"> 
</frame> 


有 一 点 要 注意 ,Netscape 浏览 器 不 支持 IFrame 标记 。 


2.5 习 题 


1. 简要 介绍 什么 是 HTML。 
2. 解释 HTML 的 Meta 标签 的 含义 及 其 作用 。 
3. 区 分 网 页 中 常见 的 字符 集 。 
4. 利用 HTML 编程 实现 如 图 2-17 所 示 的 效果 。 
“Disc- 项 目 符号 列表 : - 
ea 苹果， 
香薰 ” 


。 一 柠 楼 2 
。~ 桔子 





.Cirdle- 项 目 符号 列表 : 。 


o-+ 芋 果 " 
o- 理 自 。 
一 村 | 车” 
oo- 桔子 " 


.Square- 项 目 符号 列表 : 。 
一 东 果 » 
。 香 读 v 
。 柠 楼 。 
。， 桔子 。 


图 2-17 列表 效果 
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5. 使 用 HTML 编程 实现 如 图 2-18 所 示 的 表格 。 





a 便 三 和 
iene Er a 











图 2-18 表格 效果 


6. 利用 HTML 实现 一 个 邮件 发 送 的 功能 ,如 图 2-19 所 示 。( 提 示 ,发 送 邮件 的 代码 为 
<form action 二 "mailto:name(@qq. com" enctype 二 "text/plain">, 启 动 默认 的 邮件 客户 端 ， 
如 outlook ,foxmail 软件 发 送 邮件 ) 。 








主题 

抄 送 ; 

密 送 ; 

正文 : 和 
所 交 查 亲 内 容 


图 2-19 邮件 表单 效果 





CSS 样式 设计 


3.1 CSS 简介 


层 秋 样式 单 (Cascading Style Sheets,CSS) 是 W3C 协会 为 弥补 HTML 在 显示 属性 设 
定 上 的 不 足 而 制定 的 一 套 扩展 样式 标准 。CSS 重新 定义 了 HTML 中 原来 文字 的 显示 式 
样 ,并 增加 了 一 些 新 概念 ,如 类 、 层 等 。CSS 重新 定义 了 HTML 中 原来 的 文字 显示 样式 ,并 
还 可 以 处 理 文字 重 释 .定位 等 , 它 提供 了 更 丰富 的 样式 ,同时 ,CSS 可 集中 进行 样式 管理 ,多 
许 将 样式 定义 单独 存储 于 样式 文件 中 ,把 显示 的 内 容 和 样式 定义 分 离 , 便 于 多 个 文件 共享 。 

1996 年 , W3C 提出 了 一 个 定义 CSS 的 草案 ,很 快 这 个 草案 成 为 一 个 被 广泛 采纳 的 标 
准 。CSS 1 定义 了 许多 简单 文本 格式 化 属性 ,还 定义 了 颜色 .字体 和 边框 级 联 的 原理 .CSS 
与 HTML 之 间 的 链接 机 制 等 属性 。 

1998 年 ,W3C 又 在 原 有 草案 的 基础 上 进行 了 扩展 ,建立 了 CSS 2 规范 功能 。CSS 2 使 
网 络 开发 者 能 够 使 用 CSS 布置 页 面 、 蔡 换 HTML 表 ; 为 特定 输出 设备 创建 样式 表 ; 对 于 页 
面 的 接收 样式 部 分 ,具有 精细 的 控制 。CSS 2 包含 且 扩 展 了 CSS 1 中 的 所 有 属性 和 已 经 定 
义 的 值 。 

目前 ,CSS 的 最 新 版 本 是 CSS 3。CSS 3 语言 开发 是 朝 着 模块 化 发 展 的 。 以 前 的 规范 
作 模 块 比较 大 而 且 复 杂 。 所 以 ,把 它 分解 为 一 些小 的 模块 ,这 些 模块 包括 : 盒子 模型 .列表 
模型 . 超 链 接 方式 .语言 模块 .背景 和 边框 ,文字 效 、 多 栏 布 局 等 。 

下 一 版 的 CSS 4 仍 在 开发 过 程 中 ,直至 现在 .CSS 4 也 只 有 极 少数 功能 被 部 分 浏览 器 
支持 。 

使 用 CSS 可 以 很 方便 地 管理 显示 格式 方面 的 工作 。 首 先 , 它 能 够 对 网 页 上 的 元 素 精 确 
地 定位 ,让 网 页 设计 者 在 网 页 上 自由 控制 文字 图 片 , 使 它们 按 要 求 显示 ; 其 次 , 它 能 够 实现 
把 网 页 上 的 内 容 结 构 和 格式 控制 相 分 离 。 浏 览 者 想 要 看 的 是 网 页 上 的 内 容 结 构 , 而 为 了 让 
浏览 者 更 好 地 看 到 这 些 信息 ,就 要 通过 格式 控制 来 帮忙 。 内 容 结 构 和 格式 控制 相 分 离 使 得 
网 页 可 以 仅 由 内 容 构成 ,而 将 所 有 网 页 的 格式 控制 指向 某 个 CSS 样式 表 文件 。 这 样 就 带 来 
两 方面 的 好 处 : 

(1) 简化 了 网 页 的 格式 代码 ,外 部 的 样式 表 还 可 被 浏览 器 保存 在 缓存 里 ,从 而 加 快 下 载 
的 速度 。 

(2) 只 要 修改 保存 着 网 站 格式 的 CSS 样式 表 , 文 件 就 可 以 改变 整个 站 点 的 风格 特色 ,在 
改 页 面 数量 庞大 的 站 点 时 ,显得 格外 有 用 ,避免 了 网 页 一 个 一 个 地 修改 ,大 大 减少 了 重复 的 
工作 量 。 
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3.2 CSS 语法 与 使 用 


3.2.1 CSS 定义 语法 


CSS 是 格式 化 网 页 的 标准 方法 , 它 就 颜色 .字体 .间隔 .定位 以 及 边 距 等 几 十 种 属性 ,这 
些 属性 可 通过 Style 应 用 于 HTML 标记 中 ,但 篇 幅 限 制 ,本 书 只 讨论 其 中 常见 的 几 个 属性 ， 
包括 字体 .颜色 .背景 等 。CSS 样式 表 是 由 许多 样式 规则 组 成 的 ,用 来 控制 网 页 元 素 的 显示 
方式 。 

【语法 】 

选择 符 {属性 1: 值 1; 属性 2: 值 2…} 

规则 由 选择 符 以 及 紧 跟 其 后 的 一 系列 “属性 : 值 ” 对 组 成 ,所 有 “属性 :; 值 ” 对 用 “{)” 包 
括 ,各 “属性 : 值 ? 对 之 间 用 分 号 “; ?分隔 。 如 








pfcolor: red ; font- size:20pt} 


其 中 ,p 是 选择 符 ; color: red,font-size: 20pt 是 “属性 : 值 ? 对 。 本 规则 表示 所 有 < p > 标的 
文字 颜色 为 红色 、 大 小 为 20 磅 。 

样式 属性 值 有 以 下 几 条 规则 : 

(1) 如 果 属 性 的 值 由 多 个 单词 组 成 , 则 必须 在 值 上 加 引号 ,如 字体 的 名 称 经 常 是 几 个 单 
词 的 组 合 。 


p{font - family: 'sans serif'} 


(2) 属性 值 不 区 分 大 小 写 , 如 small,Small,SMALL,smALL 都 是 一 样 的 。 

(3) 当 属 性 值 没 有 具体 的 单位 表示 物理 意义 时 ,就 用 数值 表示 ,数值 可 以 是 整数 或 小 
数 ,可 以 是 正 数 或 负数 。 

(4) 用 数值 指定 长 度 时 ,后 面 用 2 个 字符 组 成 单位 的 缩写 ,数字 和 单位 之 间 不 能 用 空格 
隔 开 。 常 见 的 长 度 单位 见 表 3-1。 这 些 长 度 是 近似 值 ,具体 长 度 取决 于 屏幕 分 辩 率 。 


表 3-1 常见 的 长 度 单位 








名 称 像素 点 厘 米 毫 米 12 点 活字 
全 称 pixel point centiment millimeter pica 
缩写 px pt cm mm pe 

















(1) 相对 长 度 em,ex 分 别 表示 当前 字体 的 大 小 和 字母 x 的 高 度 。 

(2) 百分比 类 型 的 属性 值 表示 相对 于 前 面 使 用 过 的 尺寸 的 百分比 值 。 

(3) 许多 属性 值 可 以 被 后 代 元 素 继承 ,如 fon-size, 如 果 定 义 < body > 标签 的 字体 大 小 为 
< body font-size:5px>, 则 文档 中 的 所 有 元 素 的 字体 大 小 默认 都 会 继承 这 个 值 。 也 有 部 分 
属性 是 不 能 被 继承 的 ,如 backgroundcolor、 边 距 等 。 


3.2.2 CSS 的 使 用 
CSS 规则 总 是 由 Web 浏览 器 进行 解释 ,HTML 和 CSS 标准 对 浏览 器 应 该 如 何 显示 这 
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些 规则 作 了 明确 规定 一 一 但 是 ,它们 并 非 总 是 遵守 这 些 规定 。 用 CSS 设计 网 页 ,用 户 不 但 
需要 知道 这 些 标准 (如 CSS 规范 所 述 ) ,而 且 还 要 理解 浏览 器 的 特性 和 缺点 会 如 何 影 响 Web 
设计 的 结果 。 

如 果 浏 览 器 在 编写 时 ,就 让 它 理解 所 遇 到 的 情况 ,那么 它 就 会 根据 规范 尝试 显示 相应 的 
内 容 。 如 果 浏 览 器 不 知道 遇 到 的 情况 ,就 会 忽略 它 。 这 两 种 选择 可 以 认为 是 “正确 执行 ”。 
否则 ,浏览 器 可 能 错误 执行 。 浏 览 器 可 能 对 遇 到 的 情况 迷惑 不 解 ,以 一 些 非 标准 的 方式 显 
示 ,甚至 会 崩溃 ,虽然 这 很 少 发 生 。 当 然 , 上 述 错误 是 用 户 不 希望 看 到 的 ,也 是 问题 的 根源 。 

级 联 样式 表 从 开始 就 设计 成 能 合理 地 退化 处 理 。 意 思 就 是 ,如 果 因 为 某 些 原因 不 能 识 
别 CSS 规则 ,页 面 仍然 可 用 ,仍然 可 以 访问 其 内 容 。 因 为 显示 与 内 容 是 分 开 的 ,虽然 在 删除 
显示 效果 后 不 是 很 漂亮 ,但 内 容 应 该 能 够 独立 显示 。 

前 面 介绍 了 CSS 的 语法 ,但 要 在 浏览 器 中 显示 出 效果 ,就 要 让 浏览 器 识别 并 调用 样式 
表 , 当 浏览 器 读 取样 式 表 时 ,要 依照 文本 格式 来 读 。 为 网 页 添加 样式 表 的 方法 有 4 种 : 链 入 
外 部 样式 表 、 导 入 外 部 样式 表 、 联 入 样式 表 和 内 联 样式 。 其 中 , 联 入 样式 表 和 内 联 样式 是 将 
CSS 的 功能 组 合 于 HTML 文件 之 内 ,而 链 入 及 导入 外 部 样式 表 则 是 将 CSS 功能 以 文件 方 
式 独立 于 HTML 文件 之 外 ,然后 再 通过 链 入 或 导入 的 方式 将 HTML 文件 和 CSS 文件 链接 
在 一 起 。 

1. 链 人 外 部 样式 表 

链 入 外 部 样式 表 是 把 样式 表 保 存 为 一 个 CSS 文件 ,标记 放置 在 HTML 文档 头 部 ,在 
HTML 的 头 信息 标识 符 < head > 里 添加 < link > 标记 链接 到 这 个 CSS 文件 即 可 使 用 。 外 部 
样式 表 不 能 含有 任何 像 < head > 或 < style > 这 样 的 HTML 标记 ,仅仅 由 样式 规则 或 声明 组 
成 ,并 且 只 能 以 . CSS 为 扩展 名 。 

【语法 】 

< link rel = "样式 与 文档 ",href = "CSS 文件 ", type = "",media = "输出 媒体 "> 

属性 主要 有 

rel 属性 表明 样式 表 将 以 何 种 方式 与 HTML 文档 结合 。 一 般 取 值 为 Stylesheet, 指定 
一 个 外 部 的 样式 表 。 

href 属性 指出 CSS 文件 的 地 址 ,如 果 样式 文件 和 HTML 文件 不 是 放 在 同 路 径 下 , 则 要 
在 href 里 加 上 完整 路 径 。 

type 属性 指出 样式 类 别 , 通 常 取 值 为 text/CSS。 

media 是 可 选 的 属性 ,表示 使 用 样式 表 的 网 页 将 用 什么 媒体 输出 , 取 值 范围 包括 :( 默 
认 ) 输 出 到 计算 机 屏幕 ; print, 输 出 到 打印 机 ; projection ,输出 到 投影 仪 等 。 

一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 当 改变 样式 表 文 件 后 ,所 有 页 面 的 样式 都 
随 之 而 改变 。 在 制作 大 量 相同 样式 页 面 的 网 站 时 非常 有 用 .不 仅 减少 了 重复 的 工作 量 ,而且 
有 利于 以 后 的 修改 、 编 辑 。 同 时 ,大 多 数 浏览 器 会 保存 外 部 样式 表 在 缓冲 区 ,从 而 浏览 时 可 
减少 重复 下 载 代码 ,避免 展示 网 页 时 的 延迟 。 

【 例 3-1】 链 入 外 部 样式 表 实 例 。 

第 1 步 ,用 VS 2013 新 建 空 网 站 CSSWebsites 项 目 。 

第 2 步 , 添 加 一 个 Web 窗 体 , 命 名 为 Ex3-1. HTML ,添加 代码 : 
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< HTML > 

< head > 

<title > 链接 样式 表 CSS 示例 </title> 

< link rel = "stylesheet" type = "text/CSS" href = "3 - 1.CSS" media = "screen"> 
</head> 

<body topmargin = 4> 

<hl > 这 是 一 个 链接 样式 CSS 示例 !</hl > 

< span class = "mytext"> 这 行文 字 应 是 红色 的 .</span> 
<p> 这 一 段 底 色 应 是 黄色 .</p> 

</body> 

</HTML > 


第 3 步 , 添 加 一 个 样式 表 文 件 , 命 名 为 3-1. CSS, 代 码 如 下 : 


hi{font - family:" 素 书 ", "宋体 ";color: # ff8800} 
p{background - color:yellow;color: # 000000} 
.mytext{font - family:" 宋 体 ";font - size:14pt;color:red} 


第 4 步 ,运行 程序 ,结果 如 图 3-1 所 示 。 
这 是 一 个 链接 样式 C55 示例 ! 
这 行文 字 应 是 红色 的 。 
这 一 段 底 色 应 是 黄色 。 
3-1 运行 结果 


2. 导 人 外 部 样式 表 

导入 外 部 样式 表 是 指 在 HTML 文件 头 部 的 < style >…</style > 标记 之 间 , 利 用 CSS 的 
@import 声明 导入 外 部 样式 表 。@Import“3-1. CSS? 表 示 导 入 3-1. CSS 样式 表 , 注 意 使 用 
时 外 部 样式 表 的 路 径 , 这 和 和 链 入 外 部 样式 表 的 方法 很 相似 ,但 导入 外 部 样式 表 输 入 方式 更 有 
优势 ,因为 除外 部 样式 外 ,还 可 添加 本 页 面 的 其 他 样式 。 注 意 : @import 声明 必须 放 在 样式 
表 的 开头 部 分 ,其 他 CSS 规则 应 仍然 包括 在 style 元 素 中 。 

【 例 3-2〗 import 导入 样式 表 。 

第 1 步 ,为 CSSWebsites 项目 添加 一 个 Web 窗 体 ,命名 为 Ex3-2. HTML ,添加 如 下 代码 : 


<HITML > 

<head > 

<title> 导 人 外 部 样式 表 CSS 示例 </title> 

< style type = "text/CSS"> 

<! -- @import "3-1.CSS"; -一 > 

h2 {font - family:" 素 书 ", "宋体 ";color:blue} 
</style> 

</head> 

<body topmargin= 4> 

< hl > 这 是 一 个 链接 样式 CSS 示例 !</hl > 

< span class = "text"> 这 行文 字 应 是 红色 的 .</span> 
<h2 > 这 行文 字 应 是 蓝 色 的 .</h2> 

<p> 这 一 段 底 色 应 是 黄色 .</p> 

</body> 
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</HTML > 


第 2 步 ,运行 程序 ,结果 如 图 3-1 所 示 。 

3. 联 人 样式 表 

利用 < style > 标记 将 样式 表 联 入 HTML 文件 的 头 部 。style 元 素 放 在 文档 的 head 部 
分 ,必需 的 type 属性 用 于 指出 样式 类 别 ,通常 取 值 为 text/CSS、 有 些 低 版 本 的 浏览 器 不 能 识 
别 style 标记 ,这 意味 着 低 版 本 的 浏览 器 会 忽略 style 标记 里 的 内 容 , 直 接 以 源 代 码 的 方式 在 网 
页 上 显示 设置 的 样式 表 。 为 了 避免 这 种 情况 发 生 , 用 加 HTML 注释 的 方式 (<! 一 注释 ->) 隐 
藏 内 容 而 不 让 它 显 示 。 联 入 样式 表 的 作用 范围 是 本 HTML 文件 。 

【 例 3-3】 联 入 样式 表 实 例 。 

第 1 步 ,为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-3. HTML ,添加 如 下 代码 : 





<HTML > 
<head > 
< style type = "text/CSS"> 
body {background - image:url(022. gif);} 
</style> 
</head> 


第 2 步 , 运 行程 序 , 结 果 如 图 3-2 所 示 。 





4. 内 联 样式 

内 联 样式 是 混合 在 HTML 标记 里 使 用 的 ,用 这 种 方法 ,可 以 很 简单 地 对 某 个 元 素 单独 
定义 样式 , 它 是 连接 样式 和 HTML 标记 的 最 简单 的 方法 。 内 联 样式 的 使 用 即 直接 在 
HTML 标记 里 加 入 style 参数 ,而 style 参数 的 内 容 就 是 CSS 的 属性 和 值 。 

此 时 样式 定义 的 作用 范围 仅 限 于 此 标记 范围 之 内 。style 属性 是 随 CSS 扩展 出 来 的 , 它 
可 以 应 用 于 任意 body 元 素 ( 包 括 body 本 身 ) ,除了 basefont\ param 和 script。 还 应 注意 , 若 
要 在 一 个 HTML 文件 中 使 用 内 联 样式 ,可 以 在 文件 头 部 对 整个 文档 进行 单独 的 样式 表 语 


言 声明 , 即 < Meta http 一 equiv 二 "Content-Type" content 一 "text/CSS">。 
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如 果 使 用 内 联 样式 向 标记 中 添加 太 多 属性 及 内 容 , 对 于 网 页 设计 者 来 说 很 难 维护 ,更 难 
阅读 ,而 且 由 于 它 只 对 局 部 起 作用 ,因此 必须 对 所 有 需要 的 标签 都 作 设置 ,这 样 就 失去 了 
CSS 在 控制 页 面 布局 方面 的 优势 。 所 以 ,内 联 样式 主要 用 于 样式 仅 适 用 于 单个 页 面 的 情 
况 , 应 尽量 减少 使 用 内 联 样式 ,而 采用 其 他 样式 。 

【 例 3-4】 内 联 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-4. HTML ,添加 代码 : 

<!DOCTYPE HTML > 

< HTML xmlns = "http://www.w3. org/1999/xHTML"> 

<head > 

< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf- 8"/> 

<title></title> 
<hl style= " font - family: ,隶书 ' 宋 体 ';color:# ff8800"> 这 是 一 个 链接 样式 CSS 示例 ! 

</hl > 

</head> 

< span style = "color:red;"> 这 行文 字 应 是 红色 的 .</span> 

<p style = "color:red;background - color:yellow"> 这 一 段 底 色 应 是 黄色 .</p> 
<body style = "font - family: ' 宋 体 ';font - size:14pt" > 
</body> 

</HTML> 

第 2 步 ,运行 程序 ,结果 如 图 3-1 所 示 。 

5. 多 重 样式 表 的 和 登 加 

有 时 会 遇 到 这 样 一 种 情况 : 几 个 不 同 的 样式 使 用 了 同一 个 选择 器 ,此 时 CSS 会 对 各 属 
性 值 进 行 琶 加 处 理 , 遇 到 冲突 的 地 方 ,会 以 最 后 定义 的 为 准 。 

按照 后 定义 优先 的 原则 ,优先 级 最 高 的 是 内 联 样式 。 联 入 样式 、 导 入 外 部 样式 、 链 入 外 
部 样式 之 间 则 是 最 后 定义 的 优先 级 最 高 。 

首先 链 入 一 个 外 部 样式 表 , 其 中 定义 了 h3 选择 符 的 color、text-align 和 font-size 属性 。 


h3 {color: red;text - align: left;font - size: 8pt;} 

然后 在 内 部 样式 表 里 也 定义 了 h3 选择 符 的 text-align 和 font-size 属性 。 

h3 {text - align: right; font - size: 20pt;} 

那么 ,这 个 页 面 释 加 后 的 样式 就 是 : 

color: red; text ~ align: right; font ~ size: 20pt; 
即 标 题 3 的 文字 颜色 为 红色 ; 向 右 对 齐 ; 尺寸 为 20 号 字 。 字 体 颜色 从 外 部 样式 表 里 保留 下 
来 ,而 对 齐 方式 和 字体 尺寸 都 有 定义 时 ,按照 后 定义 优先 的 原则 。 
3.2.3 选择 符 


CSS 中 有 HTML 标记 类 选择 符 . 具 有 上 下 文 关 系 的 HTML 标记 类 选择 符 、 用 户 自 定 
义 类 选择 符 .用 户 定义 的 ID 选择 符 、 虚 元 素 和 虚 类 。 

1. HTML 标记 类 选择 符 

直接 用 HTML 标记 或 HTML 元 素 名 称 作为 选择 符 , 例 如 : 
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td, input, select, body {font - family:Verdana; font — size;e;12px;} 
form, body {margin: 0; padding: 0 } 

select, body, textarea {background?and: #fff; font— size:12px;} 
select (font ~ size: 13px; } 

Img{border: none} 

a {text - decoration: underline; cursor: pointer; } 

hi{color: #ff0000} 


2. 具有 上 下 文 关 系 的 HTML 标记 类 选择 符 

如 果 定 义 了 这 样 的 样式 规则 Body{color: blue}), 则 网 页 中 所 有 的 文字 都 以 蓝 色 显示 。 
因为 body 标记 包含 了 所 有 的 其 他 标记 符 , 除 非 男 外 指定 样式 或 格式 来 更 改 这 一 设 定 。 可 
以 为 某 个 容器 元 素 的 内 部 元 素 设置 特定 的 样式 规则 ,使 其 具有 上 下 文 关系 的 HTML 标记 。 
例如 ,如 果 只 想 使 位 于 hl 标记 符 的 b 标记 符 具 有 特定 的 属性 ,使 用 的 格式 应 为 


hl b{color: blue} 


注意 : 元 素 之 间 以 空格 分 开 ,表示 只 有 位 于 hl 标记 内 的 b 元 素 具 有 蓝 色 属性 ,其 他 任 
何 b 元 素 都 保持 原 有 颜色 。 

【 例 3-5〗】 上 下 文 关系 的 HTML 标记 类 选择 。 

第 1 步 , 为 CSSWebsites 项目 添加 一 个 Web 窗 体 ,命名 为 Ex3-5. HTML, 添 加 如 下 代码 : 


<HTML > 

<head> 

<title> CSS 选择 符 问题 </title> 

< style type = text/CSS > 

:input {color: white;} 

div input {color:red} 

div span b {color:yellow} 

</style> 

</head> 

<body> 

< input type = "text" value = "change me"> 

<br> 

<div> 
< input type = "text" value = "change me"> <br> 
<span> I'ma<b> good </b> student </span> 





</div> 
</body> change me 
</HIML > change me 











Tm a good student 


图 3-3 程序 结果 


第 2 步 ,运行 程序 ,结果 如 图 3-3 所 示 。 

3. 用户 自 定义 类 选择 符 

使 用 类 选择 符 能 对 相同 的 标记 分 类 ,并 定义 成 不 同 的 样式 。 定 义 类 选择 符 时 ,在 定义 类 
的 名 称 前 面 加 一 个 点 号 ; 假如 想 要 两 个 不 同 的 段落 ,一 个 段落 右 对 齐 , 一 个 段落 居中 ,可 以 
先 定义 两 个 类 : 


p: right (text ~ align:right} 
center(text ~ align:center } 


“. ”符号 后 面 的 right 和 center 为 类 名 。 类 的 名 称 可 以 是 用 户 自 定义 的 任意 英文 单词 
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或 以 英文 开头 的 与 数字 的 组 合 , 一 般 以 其 功能 和 效果 简要 命名 。 如 果 要 用 在 不 同 的 段落 里 ， 
在 HTML 标记 里 加 入 前 面 定义 的 类 即 可 。 


<p class = "right"> 这 个 段落 右 对 齐 </p> 
<p class = "center"> 这 个 段落 是 居中 排列 的 </p> 


用 户 定义 的 类 选择 符 的 一 般 格式 是 ， 
selector. classname{ 属 性 : 值 ; …} 


类 选择 符 还 有 一 种 用 法 ,在 选择 符 中 ,省 略 HTML 标记 名 ,这 样 可 以 把 几 个 不 同 的 元 
素 定义 成 相同 的 样式 。 例 如 : . center(text-align: center) 。 自 定义 Center 类 选择 符 为 文字 
居中 排列 。 这 样 可 以 不 限定 某 个 HTML 标记 ,而 将 其 应 用 到 任何 元 素 上 。 例 如 ,将 hl 元 素 
标题 D 和 p 元 素 都 设 为 center 类 ,使 这 两 个 元 素 的 文字 居中 显示 。 

< hl class = "center"> 这 个 标题 是 居中 排列 的 </hl > 

<p class = "center"> 这 个 段落 也 是 居中 排列 的 </p> 

这 种 省 略 HTML 标记 的 类 选择 符 是 最 常用 的 CSS 方法 ,使 用 这 种 方法 可 以 很 方便 地 
在 任意 元 素 上 套用 预先 定义 好 的 类 样式 ,但 是 前 面 的 “. ”号 不 能 省 略 。 

4. 用 户 定义 的 ID 选择 符 

用 户 定义 的 ID 选择 符 的 语法 如 下 : 


# IDname{ property:value; …} 


其 中 ,IDname 为 某 个 标记 ID 属性 的 值 。ID 选择 符 的 用 途 及 概念 和 类 选择 符 相似 ,不 
同 之 处 在 于 ,同一 个 ID 选择 符 样 式 只 能 在 HTML 文件 内 被 应 用 一 次 ,而 类 选择 符 样式 则 
可 以 多 次 被 应 用 。 也 就 是 说 ,如 果 有 些 较 特别 的 标记 需要 应 用 较 特殊 的 样式 , 则 建议 使 用 
ID 选择 符 。 定 义 ID 选择 符 时 用 “# ”号 开头 ,而 不 是 *. 号。 

5. 虚 元 素 

在 CSS 中 有 两 个 特殊 的 虚 元 素 选 择 符 , 用 于 p、div、span 等 块 级 元 素 的 首 字母 和 首 行 效 
果 , 它 们 是 : first-letter 和 first-line。 不 过 ,有 些 浏览 器 不 支持 这 两 个 虚 元 素 。 它 们 的 使 用 
语法 如 下 : 

选择 符 :first - letter{property:value; …} 

选择 符 :first - line{property: value; …} 

选择 符 .类 :first - letter{property:value; …} 

选择 符 . 类 :first- line{property: value; …} 

也 可 在 样式 中 定义 $ span{font-size:200%), 然 后 在 需要 的 位 置 应 用 该 样式 来 实现 首 字母 
效果 。 例 如 ,“< p>< span > 前 </span> 面 了 解 了 CSS 的 语法 </p>” 可 以 达到 同样 的 效果 。 

6. 虚 类 

对 于 超 链 接 a 标记 符 ,可 以 使 用 虚 类 方式 设置 不 同类 型 访问 链接 的 显示 方式 。 虚 类 是 
一 种 特殊 的 类 选择 符 ,能 被 支持 的 浏览 器 自动 识别 的 特殊 选择 符 。 

【 话 法 】 

选择 符 : 虚 类 {property:value; …} 
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定义 虚 类 的 方法 和 常规 类 很 相似 ,但 有 两 点 不 同 : 一 是 连接 符 是 冒号 ,而 不 是 句点 号 ; 
二 是 虚 类 有 预先 定义 好 的 名 称 ,也 就 是 链接 可 处 在 4 种 不 同 的 状态 下 , 即 link、 visited、 
active、hover, 分 别 代 表 未 访问 的 链接 ,已 访问 的 链接 、 活 动 链接 和 鼠标 停留 在 链接 上 。 

【 例 3-6】 上 下 文 关系 的 HTML 标记 类 选择 。 

第 1 步 , 为 CSSWebsites 项目 添加 一 个 Web 窗 体 ,命名 为 Ex3-6. HTML, 添 加 如 下 代码 : 


<HIML> 

<head> 

<title> CSS 伪 类 示例 </title> 

< style type = "text/CSS"> 

a:link {font — size: 18pt; font - family: 隶 书 ; text - decoration:none} /* 未 访问 的 链接 x*/ 
a:visited {font — size: 18pt;font - family: 宋 体 ;text - decoration:1ine— through} 


/* 已 访问 链接 * / 
a:hover {font - size: 18pt; font - family: 黑 体 ;text - decoration:overline} /* 鼠标 在 链接 上 * / 
a:active {font - size:18pt; font - family: 幼 圆 ; text - decoration:underline} ”/* 活动 链接 / 
</style> 
</head> 
<body> 
<a href = "http://Web.cse.cslg.cn"> 计 算 机 学 院 </a> 
</body> 
</HTML> 

计算 机 学 院 第 2 步 ,运行 程序 ,得 到 图 3-4(a) ,鼠标 进入 区 域 后 得 到 
(a) 图 3-4(b) ,选中 区 域 后 得 到 图 3-4(c) ,访问 之 后 呈现 如 图 3-4(d) 


计算 机 有 学院 所 示 的 结果 。 
计 机 和 学院 在 例 3-6 中 ,链接 未 访问 时 的 字体 是 隶书 且 无 下 画 线 ; 访问 


m 后 是 宋体 ,并 打上 了 删除 线 ; 单 击 变 成 活动 链接 时 字体 为 幼 圆 并 


计算 机 学 有 下 面 线 ; 鼠标 在 链接 上 时 为 黑体 和 上 面 线 。 根 据 层 秋 顺 序 , 定 
(0) 义 这 些 链接 样式 时 ,一 定 要 按照 a; link,a: visited,a: hover,a: 
计算 桢 学院 active 的 顺序 书写 。 
四 还 可 以 将 伪 类 和 类 选择 符 及 其 他 选择 符 组 合 起 来 使 用 ,其 


图 3-4 程序 结果 形式 如 下 : 
选择 符 .类 : 伪 类 {property: value; …} 
可 以 在 同一 个 页 面 中 做 出 几 组 不 同 的 链接 效果 。 


3.3 CSS 样式 设计 简介 


3.3.1 字体 样式 


几乎 所 有 的 HTML 文档 都 包含 了 文本 ,文本 的 字体 属性 是 最 常用 的 样式 。 字 体 样式 
包括 字体 族 (font-family)、 字 体 大 小 (font-size)、 字 体 风 格 (font-style)、 字 体 变 体 (font- 
variant) ,字体 粗细 (font-weight) 字体 综合 设置 (font) 属 性 。 
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1. 字体 族 (font-family) 

字体 族 是 指 字体 名 称 , 浏 览 器 利用 字体 列表 中 能 够 支持 的 第 一 个 字体 显示 文本 。 
【 话 法 】 

font - family: 第 1 个 字体 名 称 ,第 2 个 字体 名 称 , … ,第 n 个 字体 名 称 


如 果 浏 览 器 支持 第 1 个 字体 , 则 用 这 种 字体 显示 ; 否则 ,判断 第 2 个 字体 是 否 支持 ,如 
果 支 持 这 种 字体 , 则 用 第 2 个 字体 ,否则 判断 第 3 个 字体 ,以 此 类 推 。 

font-family 的 属性 值 可 以 指定 一 个 通用 的 字体 。 常 见 的 通用 字体 见 表 3-2。 每 个 浏览 器 
都 有 自己 的 字体 ,可 以 把 通用 字体 放 到 属性 指定 的 最 后 字体 ,如 果 浏 览 器 不 支持 指定 的 字体 ， 
可 以 从 相同 类 别 字体 中 选择 一 种 可 用 的 字体 ,如 font-family: Arial, Helvetica,Futura,sans-serif。 

如 果 一 个 字体 的 名 称 不 止 一 个 单词 ,那么 整个 字体 名 称 需 要 用 单 引 号 ,如 font-family: 
“Times New Roman ” 。 


表 3-2 常见 的 通用 字体 

















通用 字体 名 称 对 应 字体 
serif Times New Roman,Garamond 
sans-serif Arial, Helvetica 
cursive Caflisch Script,Zapf-Chancery 
fantasy Critter, Cottonwood 
monospace Courier, Prestige 





2. 字体 大 小 (font-size) 

字体 大 小 分 两 种 : 绝对 大 小 和 相对 大 小 。 

字体 大 小 的 绝对 值 单位 有 点 、12 点 活字 、 像 素 , 或 用 关键 字 xx-small, x-small, small， 
medium ,large,x-large,xx-large。 使 用 关键 字 的 大 小 时 , 相 邻 两 个 关键 字 之 间 的 大 小 不 同 ， 
浏览 器 不 一 样 大 。 

字体 大 小 的 相对 值 有 smaller 和 larger。 它 们 是 根据 父 元 素 的 字体 大 小 调整 子 元 素 的 
字体 大 小 ,具体 调整 的 程度 取决 于 浏览 器 。 也 可 以 用 百分比 值 调整 子 元 素 的 大 小 ,不 同 浏览 
器 用 百分比 的 相对 大 小 是 一 样 的 。 最 后 ,可 以 以 em 为 单位 表示 相对 大 小 。font-size: 
120% 和 font-size: 1. 2em 是 等 价 的 。 

3. 字体 风格 (font-style) 

font-style 属性 用 于 设置 使 用 斜体 倾斜 或 正常 字体 。 斜 体 字体 通常 定义 为 字体 系列 中 
的 一 个 单独 的 字体 。 可 能 的 取 值 有 3 种 。 

normal: 默认 值 取 值 ,表示 浏览 器 显示 一 个 标准 的 字体 样式 。 

italic: 浏览 器 会 显示 一 个 斜体 的 字体 样式 。 

oblique: 浏览 器 会 显示 一 个 倾斜 的 字体 样式 。 

后 两 者 的 显示 效果 差不多 ,都 是 向 右倾 斜 ,italic 的 字体 衬 线 稍 微 长 一 点 。 

4. 字体 变 体 (font-variant) 

font-variant 属性 用 于 设置 小 型 大 写字 母 的 字体 显示 文本 ,这 意味 着 所 有 的 小 写字 母 均 
会 转换 为 大 写 , 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 其 余 文 本 相 比 ,其 字体 尺寸 更 小 。 可 能 
的 取 值 有 : 
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normal: 默认 的 取 值 ,表示 浏览 器 会 显示 一 个 标准 的 字体 。 

small-caps: 浏览 器 会 显示 小 型 大 写字 母 的 字体 。 

5. 字体 粗细 (font-weight) 

font-weight 属性 用 于 设置 显示 元 素 的 文本 中 所 用 的 字体 加 粗 。 数 字 值 400 相当 于 关 
键 字 normal,700 等 价 于 bold, 可 能 的 取 值 有 100,200,300,400,500,600,700,800,900。 每 
个 数字 值 对 应 的 字体 加 粗 必须 至 少 与 下 一 个 最 小 数字 一 样 细 , 而 且 至 少 与 下 一 个 最 大 数字 
一 样 粗 。 可 能 的 取 值 有 : 

normal: 默认 值 ,表示 定义 标准 的 字符 。 

bold: 表示 定义 粗 体 字符 。 

Bolder: 表示 定义 更 粗 的 字符 。 

Lighter: 表示 定义 更 细 的 字符 。 
或 100,200,300,400,500,600,700,800,900 中 的 一 个 值 。 

6. 字体 综合 设置 (font) 

font 简写 属性 在 一 个 声明 中 设置 所 有 字体 属性 。 这 个 简写 属性 用 于 一 次 设置 元 素 字 体 
的 两 个 或 更 多 方面 ,至 少 要 指定 字体 大 小 和 字体 系列 。font 各 个 属性 的 顺序 很 重要 ,font- 
family 必须 放 到 最 后 ,font-size 为 倒数 第 2, 其 他 属性 可 有 可 无 ,如 果 有 , 则 位 于 font-size 
之 前 。 

【 例 3-7】 字体 样式 的 综合 运用 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-7. HTML ,添加 如 下 代码 


<! DOCTYPE HTML > 
<HIML lang = "en"> 
<head> 
<title > 字体 样式 的 综合 运用 </title> 
<Meta charset = "utf -8" /> 
< style type = "text/CSS"> 
p.mypl { font - family: Arial, Helvetica, sans - serif; font ~ size:xx— small } 
p.myp2 { font - family: Arial,Helvetica, sans — serif; font- size:xx— large } 
p.myp3{font - size:1. 2em;font - variant: small ~ caps} 
p.myp4{font - size:1.2em; font — style:italic} 
p.myp5{font - weight :bolder; font - size:1.2em; font - style:oblique} 
p.myp6{ font: bold 1.1em 'Times New Roman'} 
</style> 
</head> 
<body> 
<p class = "mypl"> 绝对 值 的 大 小 单位 有 : 点 、12 点 活字 、 像 素 ,或 用 关键 字 xx - small,x- small, 
small, medium, large, x — large xx — large </p> 
<p class = "myp2"> 绝对 值 的 大 小 单位 有 : 点 、12 点 活字 、 像 素 ,或 用 关键 字 zx- small, x small, 
small, medium, large, x — large, xx — large </p> 
<pclass = "myp3">all possible values: xx— small,x— small, small, medium, large, x — large, xx 一 
large </p> 
<pclass = "myp4"> It's italic style. </p> 
<pclass = "myp5"> It's oblique style. </p> 
<p class = "myp6"> font 简写 属性 在 一 个 声明 中 设置 所 有 字体 属性 </p> 
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</body> 
</HTML> 


第 2 步 , 运 行程 序 , 结 果 如 图 3-5 所 示 。 





稚 对 位 的 大 小 单位 育 ， 点 、 届 2 点 活字 、 作 素 ， 或 月 关 锭 字 xx-small.x-smallsmall, medium,large.x-large xzoclarge 
绝对 值 的 大 小 单位 有 : 点 、12 点 活字 、 像 素 ， 或 用 关键 
字 xx-small,x-small,small, medium,large,x-large,xx- 
large 





|ALL POSSIBLE VALUES: XX-SMALL,X-SMALL,SMALL, MEDIUM.LARGE, X-LARGE.XX-LARGE 


t's italic style. 
[ft's oplique style. 
lfont 简写 局 性 在 一 个 声明 中 设置 所 有 字体 属性 








3-5 ”运行 结果 


3.3.2 文本 样式 

设置 文字 之 间 的 显示 特性 包括 字符 间隔 .单词 间距 ,文本 行 高 ,文本 修饰 ,大 小 写 转 换 。 

1. 字符 间隔 (letter-spacing) 

letter-spacing 用 于 控制 单词 的 字符 之 间 的 距离 。 

【语法 】 

letter - spacing: 参 数 

参数 的 取 值 : normal, 恢 复 到 与 父 元 素 相 同 。 任 意 长 度 属性 的 值 ,长 度 值 为 正 值 会 增加 
字母 之 间 的 距离 ,为 负 值 会 减少 间距 。 

2. 单词 间距 (word-sapcing) 

word-sapcing 用 于 控制 单词 之 间 的 距离 。 

【 话 法 】 

word- sapcing: 参 数 

参数 的 取 值 : normal, 恢 复 到 与 父 元 素 相 同 。 任 意 长 度 属性 的 值 ,长 度 值 为 正 值 会 增加 
单词 之 间 的 距离 ,为 负 值 会 减少 间距 。 

3. 文本 行 高 (line-height) 

行 高 是 指 上 下 两 行 基准 线 之 间 的 垂直 距离 。 

【语法 】 

line - height: 参 数 

参数 的 取 值 : 不 带 单位 的 数字 ,以 1 为 基数 ,相当 于 比例 关系 的 100% 。 带 长 度 单位 的 
数字 ,以 具体 的 单位 为 准 。 

normal, 恢 复 到 与 父 元 素 相同 。 
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【 例 3-8】 文本 间距 的 实例 。 
第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-8. HTML, 添 加 如 下 代码 : 


<HIML lang = "en"> 
<head> 
<title> Text spacing properties </title> 
<Meta charset = "utf -8" /> 
< style type = "text/CSS"> 
Pp. bigtracking {letter — spacing: 0. 4em;} 
p. smalltracking {letter - spacing: — 0.08em;} 
Pp. bigbetweenwords {word— spacing: 0. 4em;} 
p. smallbetweenwords {word— spacing: — 0.1em;} 
p.bigleading {line - height: 2.5;} 
p. smallleading {line— height: 1.0;} 
</style> 
</head> 
<body> 
<pclass = "bigtracking"> 
字符 间距 On the plains of hesitation [letter - spacing: 0.4em] 
</p><p/> 
<pclass = "smalltracking"> 
字符 间距 Bleach the bones of countless millions [letter - spacing: - 0.08em] 
</p><br /> 
<pclass = "bigbetweenwords"> 
单词 间距 Who at the dawn of victory [word - spacing: 0.4em] 
</p><p /> 
<pclass = "smallbetweenwords"> 
单词 间距 Sat down to wait and waiting died [word- spacing: - 0.1em] 
</p> <br /> 
<pclass = "bigleading"> 
行 高 If you think CSS is simple, [line- height: 2.5] <br /> 
You are quite mistaken 
</p><br /> 
<pclass = "smallleading"> 
行 高 If you think HTML 5 is all old stuff, [line— height: 1.0] <br /> 
You are quite mistaken 
</p> 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,结果 如 图 3-6 所 示 。 


字符 间距 On the plains of hesitation [letter-spacing: 0.4em] 
字符 | 本 RE Bleach he bones of coutiess mgioos [letter-spacing: -0 08erm] 


单词 间距 Who at the dawn of victory [word-spacing: 0.4em] 


单词 间距 Sat downto waitand waiting died [word-spacing: -0.1em] 


行 高 fyou think CSS is simple, [ine beisht 2.5] 


You arc quitc mistakcn 


行 高 fyou think HTMLS is all old stuf [ine height 1.0] 
[You are quite mistaken 











图 3-6 运行 结果 
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4. 文本 修饰 (text-decoration) 
文本 修饰 的 主要 用 途 是 改变 浏览 器 显示 文字 链接 时 的 下 画 线 。 
【 话 法 】 


text - decoration: 参数 


参数 的 可 能 取 值 : 

underline, 为 文字 加 下 面 线 。 

overline ,为 文字 加 上 画 线 。 

line-through ,为 文字 加 删除 线 。 

blink ,使 文字 闪烁 。 

none, 删 除 下 面 线 。 

【 例 3-9】 文本 修饰 。 

第 1 步 , 为 CSSWebsites 项目 添加 一 个 Web 窗 体 ,命名 为 Ex3-9. HTML, 添 加 如 下 代码 : 


<HTML lang = "en"> 
<head> 
<title> Text decoration </title> 
<Meta = charset = "utf -8" /> 
< style type = "text/CSS"> 
p. through {text - decoration: line— through;} 
p. over {text - decoration: overline;} 
p. under {text - decoration: underline;} 
</style> 
</head> 
<body> 
<pclass = "through"> 
This illustrates line ~ through 
</p> 
<pclass= "over"> 
This illustrates overline 
</p> 
<pclass = "under"> 
This illustrates underline 








</p> This-iustrates Hine=thzeush 
</body> This iiiustrates overline 
</HTML > This illustrates underline 
第 2 步 ,运行 程序 ,结果 如 图 3-7 所 示 。 图 3.7 运行 结果 


5. 大 小 写 转 换 (text-transform) 

文字 大 小 写 转换 使 网 页 的 设计 者 不 用 在 输入 文字 时 就 完成 文字 大 写 , 而 是 在 输入 完毕 
后 ,根据 需要 再 对 局 部 的 文字 设置 大 小 写 。 

【语法 】 


text - transform: 参数 


参数 的 可 能 取 值 : uppercase, 所 有 文字 大 写 显示 ; lowercase, 所 有 文字 小 写 显 示 ; captalize, 每 
个 单词 的 头 字母 大 写 显 示 ; none, 不 继承 母体 的 文字 变形 参数 。 
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3.3.3 颜色 样式 


颜色 有 3 种 定义 方式 。 

第 1 种 是 Web 页 面 的 原始 组 ,有 17 种 颜色 ,直接 使 用 的 名 字 的 颜色 值 称 为 命名 颜色 ， 
但 是 颜色 数 太 少 。CSS 支持 17 种 合法 命名 颜色 (标准 颜色 ) :aqua,fuchsia,lime,olive,red， 
white, black, gray, maroon, orange, silver, yellow, blue, green, navy, purple, teal。W3C 的 
HTML 4.0 标准 仅 支 持 16 种 颜色 名 ,它们 是 aqua, black, blue,fuchsia, gray, green, lime，, 
maroon,navy,olive,purple,red,silver,teal, white ,yellow.。 

第 2 种 包含 了 147 种 命名 颜色 ,被 浏览 器 广泛 支持 ,具体 名 称 和 颜色 图 参看 http:// 
www. w3school. com. cn/tags/ HTML_ref_colornames. asp。 

第 3 种 是 调试 板 , 有 216 种 颜色 ,又 称 为 216 种 Web 安全 颜色 ,之 所 以 不 是 256 种 Web 
安全 颜色 ,是 因为 Microsoft 和 Mac 操作 系统 有 40 种 不 同 的 系统 保留 颜色 。 

1. 前 景色 属性 (color) 

【语法 】 

color: 参 数 


参数 的 取 值 可 以 参考 以 上 3 种 预定 义 的 颜色 和 2. 2. 2 节 关 于 字体 颜色 的 内 容 。 
2. 背景 色 属 性 (background-color) 

【语法 】 

background - color: 参 数 


参数 的 取 值 可 以 参考 以 上 3 种 预定 义 的 颜色 和 2. 2. 2 节 关 于 字体 颜色 的 内 容 。 

目前 ,专业 的 Web 设计 师 喜 欢 自 己 定义 颜色 。 有 关 Web 配色 基础 的 色彩 设计 方法 ,可 
以 参阅 http://www. shejidaren. com/se-cai-she-ji-fang-fa. HTML。 很 多 网 站 提供 了 一 些 
经 典 的 配色 方案 ,如 http://www. xin126. cn/show. asp? id 二 3141 上 提供 了 13 套 Web 页 
面 标准 配色 方案 ,部 分 方案 如 图 3-8 所 示 。 


FFFFCC CCFFFF FFCCCC FFcccc FFFF33 CCCCFF 。 rrq966 rr6666 Frcccc FFC¢99 CCFF99 GGCG6C 
| 

FFecce FFFFFF ccFFcC ccFFFF cccccc cCFF39 。 FFCCCC FFFFFF 93CC93 。 33CCCC FFCC39 FFCCCC 

CCCCFF FFCCCC CCFFFF FFCc99 FFFFCC 99CCCC 


3-8 ”和 柔和、 明亮 和 温和 的 Web 配色 方案 


3.3.4 列表 样式 


用 于 设置 列表 标记 (< ol > 和 < ul >) 的 显示 特性 包括 listrstyle-type list-style-image、 
list-style-position listrstyle 等 。 
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(1) list-style-type: 表 示 项 目 符号 。 
【 话 法 】 
list- style- type: 参数 


参数 取 值 如 下 : 

无 序列 表 的 项 目 符号 形状 值 : disc- 实 心 圆 点 ; circle- 空 心 圆 ; square- 实 心 方形 。 

有 序列 表 值 : decimal- 阿 拉 伯 数字 ,如 1、2、3、4 等 ; lower-roman- 小 写 罗 马 数字 ,如 iii、 
iii\iv 等 ; Upper-roman- 大 写 罗 马 字母 ,如 工 . 工 . 芽 、V 等 ; lower-alpha- 小 写 英文 字母 ,如 a、 
bc.d 等 ; Upper-alpha- 大 写 英文 字母 ,如 A、B、C.D 等 ; none- 不 设 定 ; lower-greek :小写 希 
腊 字 母 , 如 Calpha) 、BCbeta) 、YCgamma) 等 。 

(2) list-style-image: 使 用 图 像 作为 项 目 符号 。 

【 话 法 】 

list— style— image: url(URL) 


(3) listrstyle-position: 设 定 项 目 符号 是 否 在 字幕 里 面 也 文字 对 齐 。 格 式 : list-style- 
position; outside/inside。 

(4) list-style: 综合 设置 项 目 属性 。 格 式 : list-style: type,position。 

【 例 3-10】 无 序列 表 样 式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-10. HTML, 添 加 如 下 代码 : 


<HTML > 

<head > 

< style type = "text/CSS"> 

ul.disc {list— style- type: disc} 
ul.circle {list— style- type: circle} 
ul. square {list— style— type: square} 
ul.none {list -~ style~ type: none} 
ul.myimage{list ~ style— image: url( 'images\\down. gif')} 
</style> 

</head> 

<body> 

<ul class= "disc"> 

<1i> 咖 啡 </1i> 

<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

</ul> 

<ul class= "circle"> 

<1i> 咖 啡 </1i> 

<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

</ul> 

<ul class = "square"> 

<1i> 咖 啡 </1i> 

<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

</ul> 

<ul class = "none"> 


<1i> 咖 啡 </1i> 
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<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
</ul> 

<ul class = "myimage"> 
<1i > 咖啡 </1i> 

<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
</ul> 

</body> 

</HTML > 


第 2 步 , 运 行程 序 , 结 果 如 图 3-9 所 示 。 
【 例 3-11〗 有 序列 表 样 式 。 
第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-11. HTML, 添 加 如 下 代码 : 


<HTML > 

<head > 

< style type = "text/CSS"> 

ol. decimal {list— style— type: decimal} 

ol. 1roman {list — style- type: lower ~— roman} 

ol.uroman {list — style— type: upper - roman} 

ol. lalpha {list- style- type: lower ~ alpha} 

ol.ualpha {list- style— type: upper - alpha} 

</style> 

</head> 

<body> 

<ol class = "decimal"> < 1i> 咖 啡 </1i> < 1i> 茶 </1i><1i> 可 口 可 乐 </1i> </ol> 
<ol class = "lroman"> <li> 咖 啡 </1i> <1i> 茶 </1i><1i> 可 口 可 乐 </1i> </ol > 
<ol class = "uroman">< li> 咖 啡 </1i>< 1i> 茶 </1i><1i> 可 口 可 乐 </1i></ol> 
<ol class = "lalpha"><1i> 咖 啡 </1i>< 1i> 茶 </1i><1i> 可 口 可 乐 </1i></ol> 
<ol class = "ualpha">< 1i> 咖 啡 </1i>< 1i> 茶 </1i><1i> 可 口 可 乐 </1i></ol> 
</body> 

</HTML > 


第 2 步 ,运行 程序 ,结果 如 图 3-10 所 示 。 





。 咖 味 

。 茶 

。 可 口 可 乐 

。 咖啡 

。 茶 

。 可 口 可 乐 

， 咖啡 

" 茶 

= 可 口 可 乐 
咖啡 
杀 _ 
可 口 可 乐 

于 咖啡 

下 茶 

囊 可 口 可 乐 




















图 3-9 无 序列 表 样 式 结果 图 3-10 有 序列 表 样式 结果 
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3.3.5 表格 样式 


1. 设置 表格 宽度 (width) ,高度 Cheighb 
表格 的 宽度 和 高 度 可 以 使 用 < table > 标签 的 属性 width 和 height 设置 ,单位 都 可 以 用 
像素 ,width 还 可 以 用 % 表 示 。 如 果 要 控制 行 高 ,可 以 用 < tr > 或 < td > 标签 的 属性 height 


设置 。 
【 话 法 】 


<table width = "宽度 ”height = "高 度 "> 
<tr height = "高 度 " > <td>…</td></tr> 


</table> 


2. 设置 边框 样式 的 border ,frame 和 rules 属性 
表格 的 边框 粗细 和 外 边框 样式 可 以 使 用 < table > 标签 的 border 和 frame 属性 设置 ,其 
中 frame 常见 的 属性 值 表 3-3; 表格 内 边框 使 用 < table > 标签 的 rules 属性 设置 。rules 常见 


的 属性 值 见 表 3-4。 
【语法 】 


< table border = "边框 粗细 ”frame = "外 边框 ”rules = "内 边框 "> 


<tr><td>…</td></tr> 


</table> 









































其 中 ,边框 粗细 的 单位 是 像素 。 
表 3-3 frame 常见 的 属性 值 
属 性 值 说 明 
above 显示 上 边框 
border 显示 上 .下 、 左 、 右 边框 
below 显示 下 边框 
hsides 显示 上 、 下 边框 
lhs 显示 左边 框 
rhs 显示 右边 框 
void 不 显示 边框 
vsides 显示 左右 边框 
表 3-4 rules 常见 的 属性 值 
属 性 说 明 
all 显示 所 有 内 部 边框 
groups 显示 介 于 行列 边框 
none 不 显示 内 部 边框 
cols 仅 显 示 列 边框 
TOws 仅 显示 行 边框 
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【 例 3-12】 表格 内 外 边框 属性 的 使 用 。 
第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-12. HTML ,添加 如 下 代码 : 


<HIML> 

<body> 

<p><b> 注 释 : frame 外 边框 属性 设置 </b> rules 内 边框 属性 </p> 

<p>Table with rules = "rows" :</p> 

< table rules = "rows" frame = "border"> 

<tr> 

<th> Month</th> 

<th> Savings </th> 

</tr> 

< 

<td> January </td> 

<td>$ 100</td> 

</tr> 

</table> 

<p> Table with rules = "cols" :</p> 

<table rules = "cols" > 

<tr> 

<th> Month</th> 

<th> Savings </th> 

</tr> 

<tr> 

<td> January </td> 

<td>$ 100</td> 

</tr> 

</table> 

<p>Table with rules = "all":</p> 

<table rules = "all"> 
<tr> <th> Month</th> <th> Savings </th> </tr> 
<tr> <td> January</td> <td>$100</td> </tr> 

</table> 

</body> 

</HTML > 


第 2 步 ,运行 程序 ,结果 如 图 3-11 所 示 。 
注释 ，frame 外 边框 属性 设置 rules 内 边 和 定居 性 


Table with rules=“rows”: 











Nonth Savings| 
January $100 














Table with rules=“cole”: 


onth Savings 
Januaryl$100 


Table with rules="all”: 
Nonth ,Savings 
i 


图 3-11 表格 样式 结果 
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3. 水 平和 垂直 对 齐 属性 

设置 行内 水 平 对 齐 方式 ,需要 设置 < tr > 标记 的 align 属性 值 。 常 用 的 align 属性 值 有 
left、right 和 center, 分 别 表示 左 对 齐 、 右 对 齐 和 居中 对 齐 。 

设置 行内 垂直 对 齐 方 式 , 需 要 设置 < tr > 标记 的 valign 属性 值 。 常 用 的 valign 属性 值 有 
顶端 对 齐 (top) 、 居 中 对 齐 (middle) 、 底 线 对 齐 (bottom) ,文本 的 底 端 对 齐 (text-bottom) 、 文 
本 的 顶端 对 齐 (text-top) 和 基线 (baseline) 。 

【语法 】 

<table > 


<tr align = "水 平 对 齐 方式 "> <td>…</td></tr> 
<tr valign = "垂直 对 齐 方式 "> <td>…</td></tr> 


</table> 


4. 设置 单元 格 间 距 与 边 距 属性 cellspacing 和 cellpadding 

在 HTML 文件 中 ,表格 中 单元 格 的 间距 由 < table > 标签 的 cellspacing 属性 值 设置 ; 表 
格 单元 格 的 内 容 与 边框 之 间 的 间距 由 < table > 标签 的 cellpadding 属性 值 设置 。 

【 话 法 】 


< table cellspacing = "单元 格 的 间距 或 $ " cellpadding = "内 容 与 边框 的 间距 或 % "> 
<tr><td>…</td> </tr> 


</table> 


【 例 3-13】 表格 属性 的 使 用 。 
第 1 步 , 为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-13. HTML, 添 加 如 下 代码 : 


<HTML > 

<head> 

< style type = "text/CSS"> 
table. hovertable { 

font - family: verdana,arial, sans - serif; 
font ~ size:11px; 

Color: # 333333; 

border — width: 1px; 

border - color: #999999; 
border - collapse: collapse; 
: 

table. hovertable th { 
background - color: # c3dde0; 
border — width: 1px; 

padding: 8px; 

border - style: solid; 
border — color: #a9c6c9; 

} 

table. hovertable tr { 
background — color: # d4e3e5; 
} 


64 web 系统 与 技术 





table. hovertable td { 

border — width: 1px; 

padding: 8px; 

border - style: solid; 

border - color: 井 agc6c9; 

} 

</style> 

</head> 

<body> 

< table class = "hovertable"> 

<tr> 

< th> Info Header 1 </th>< th> Info Header 2 </th>< th> Info Header 3 </th> 

</tr> 

<tr onmouseover = "this. style. backgroundColor = '# ffff66';" 
onmouseout = "this. style. backgroundColor = '#d4e3e5';"> 

<td> Item 1A</td>< td> Item 1B</td>< td> Item 1C</td> 

</tr> 

<tr onmouseover = "this. style. backgroundColor = '# ffff66';" 
onmouseout = "this. style. backgroundColor = '#d4e3e5';"> 

<td> Item 2A</td>< td> Item 2B</td>< td> Item 2C</td> 

</tr> 

< tr onmouseover = "this. style. backgroundColor = '# ffff66';" 
onmouseout = "this. style. backgroundColor = '#d4e3e5';"> 

<td> Item 3A</td>< td> Item 3B</td>< td> Item 3C</td> 

</tr> 

<tr onmouseover = "this. style. backgroundColor = '#ffff66';" 
onmouseout = "this. style. backgroundColor = '# d4e3e5';"> 

<td> Item 4A </td>< td> Item 4B</td>< td> Item 4C </td> 

</tr> 

<tr onmouseover = "this. style. backgroundColor = '#ffff66';" 
onmouseout = "this. style. backgroundColor = '#d4e3e5';"> 

<td> Item 5A</td>< td> Item 5B</td>< td> Item 5C</td> 

</tr> 

</table> 

</body> 

</HTML> 


第 2 步 ,运行 程序 ,结果 如 图 3-12 所 示 。 


Info Header 1 | Info Header 2 Info Header 3 

















ltem 1A | Fem le Item1C 
Item 2A Fem 28 Item 2C 
| "| 
Item 3A | sam 38 Trem 2c 
Ttem 4A Eeem 4 Teem4c 
Ttem SA Hem sa Tem sc 


3-12 ”表格 样式 结果 
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3.3.6 鼠标 样式 


在 网 页 上 ,鼠标 的 形状 可 以 表示 浏览 器 的 当前 状态 : 


平时 呈 箭 头 形 、 指 向 链接 时 成 为 手 


形 、 等 待 网 页 下 载 时 成 为 沙漏 型 链接 指向 一 个 帮助 文件 .链接 也 可 以 是 向 前 进 一 页 或 是 向 
后 退 一 页 等 。CSS 提供 了 多 种 鼠标 形状 供 选择 , 见 表 3-5。 


表 3-5 不 同 的 鼠标 形状 
































参 数 鼠标 形状 参 数 鼠标 形状 
cursor:hand 手 形 cursor:crosshair 十 字形 
cursor: wait 沙漏 形 cursor:move 十 字 箭头 形 
cursor:e-resize 右 箭 头 形 cursor:nrresize 上 箭头 形 
cursor:text 文本 形 cursor: w-resize 左 箭头 形 
cursor:help 问号 形 Cursor:s-resize 下 箭头 形 
Cursor:nw-resize 左上 箭头 形 Cursor: se-resize 右 下 箭头 形 
cursor: sw-resize 左下 箭头 形 cursor: no-drop 无 法 释放 
cursor: autos 自动 cursor: not-allowed 禁止 
cursor:progress 处 理 中 cursor: url('#'); 用 户 自 定义 (可 用 动画 ) 











其 中 ,# 一 光标 文件 地 址 , 且 文 件 格式 必须 为 . cur 或 . ani。 


【 话 法 】 
style= "cursor: 参 数 " 


其 中 ,参数 见 表 3-5。 
【 例 3-14】 光标 样式 。 


第 1 步 ,为 CSSWebsites 项目 添加 一 个 Web 窗 体 , 命 名 为 Ex3-14. HTML, 添 加 如 下 代码 : 


<HITML > 
<head > 


<Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf -8" /> 


<title> CSS cursor 属性 示例 </title> 
< style type = "text/CSS" media = "all"> 


p#auto { cursor: auto;} 
p#crosshair { cursor: crosshair;} 
p#default { cursor: default; } 
Pp# pointer { cursor: pointer; } 
Pp#move { cursor: move; } 
p#e- resize { cursor: e— resize;} 
pi#ne- resize { cursor: ne- resize; } 
pi#nw— resize  { cursor: nw- resize; } 
p#n- resize { cursor: n— resize; } 
p#se-resize { cursor: se- resize; } 
pi#sw—- resize { cursor: sw— resize; } 
p#s- resize { cursor: s— resize; } 
pi#w— resize { cursor: w— resize; } 
p# text { cursor: text; } 


S 


ray 
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ee 
p#wait { cursor: wait; } 
p#help { cursor: help;} 
Pp#progress { cursor: progress; } 
p { border: lpx solid black; 
background: lightblue; } 
</style> 
</head> 
<body> 


<p id= "auto"> 梦 之 都 XHTML 教程 ,auto 正常 鼠标 </p> 

<p id = "crosshair"> 梦 之 都 CSS 教程 , crosshair 十 字 鼠 标 </p> 
<p id= "default"> 梦 之 都 XHTML 教程 ,default 默认 鼠标 </p> 
<p id = "pointer"> 梦 之 都 CSS 教程 , pointer 鼠标 </p> 

<p id = "move"> 梦 之 都 XHTML 教程 ,move 移动 鼠标 </p> 

<p id= "e- resize"> 梦 之 都 CSS 教程 ,e- resize 鼠标 </p> 

<p id= "ne- resize"> 梦 之 都 XHTML 教程 ,ne - resize 鼠标 </p> 
<p id= "nw- resize"> 梦 之 都 CSS 教程 , nw- resize 鼠标 </p> 
<p id= "n- resize"> 梦 之 都 XHTML 教程 ,n- resize 鼠标 </p> 
<p id= "se- resize"> 梦 之 都 CSS 教程 , se - resize 鼠标 </p> 
<p id= "sw- resize"> 梦 之 都 XHTML 教程 , sw - resize 鼠标 </p> 
<p id= "s- resize"> 梦 之 都 CSS 教程 , s- resize 鼠标 </p> 

<p id= "w- resize"> 梦 之 都 XHTML 教程 ,w- resize 鼠标 </p> 
<p id = "text"> 梦 之 都 CSS 教程 ,text 文字 鼠标 </p> 

<p id= "wait"> 梦 之 都 XHTML 教程 , wait 等 待 鼠标 </p> 

<p id= "help"> 梦 之 都 CSS 教程 , help 求助 鼠标 </p> 

<p id= "progress"> 梦 之 都 XHTML 教程 , progress 过 程 鼠 标 </p> 
</body> 

</HTML> 


第 2 步 ,运行 程序 ,结果 如 图 3-13 所 示 ,光标 放 到 对 应 区 域 会 显示 不 同 的 形状 。 


3-13 ”光标 样式 结果 
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3.3.7 滤 镜 样式 


CSS 提供 了 一 些 内 置 的 多 媒体 滤 镜 特效 ,使 用 这 种 技术 可 以 把 可 视 化 的 滤 镜 和 转换 效 
果 添 加 到 一 个 标准 HTML 元 素 上 ,如 图 片 .文本 容器 ,以 及 其 他 一 些 对 象 。CSS 的 滤 镜 有 
IE 浏览 器 支持 ,而 Firefox、Chrome 和 Opera 没有 特别 的 滤 镜 ,它们 几乎 完全 支持 CSS 3。 

1. alpha 滤 镜 

【语法 】 

{filter: alpha(opacity= 属性 值 1, finishopacity= 属性 值 2, style = 属性 值 3, startx= 属性 值 4， 

starty= 属性 值 5, finishx = 属性 值 6, finishy= 属性 值 7); } 

作用 : 该 滤 镜 能 够 使 对 象 呈现 渐变 透明 效果 ,效果 由 小 括号 中 的 各 属性 名 及 其 对 应 的 
属性 值 决定 。 

参数 : 

opacity 属性 用 于 设置 不 透明 的 程度 ,用 百分比 表示 其 属性 值 ,大 小 从 0 一 100,0 表示 完 
全 透明 ,100 表示 完全 不 透明 。 

finishopacity 属性 是 同 opacity 一 起 使 用 的 一 个 选择 性 的 参数 , 当 设 定 了 opacity 和 
finishopacity 时 ,可 以 制作 出 透明 渐进 的 效果 ; 其 属性 值 也 是 0 一 100,0 表示 完全 透明 ,100 
表示 完全 不 透明 。 

style 属性 用 于 设置 渐变 风格 , 当 同 时 设 定 了 opacity 和 finishopacity 产生 透明 渐进 时 ， 
它 主要 用 来 制定 渐进 的 显示 形状 : 0 代表 均匀 渐进 ; 1 代表 线性 渐进 ; 2 代表 放射 渐进 ; 
3 代表 长 方形 的 直角 渐进 。 

startx 属性 用 来 设置 水 平方 向 渐进 的 起 始 位 置 。 

finishx 属性 用 来 设置 水 平方 向 渐进 的 结束 位 置 。 

finishy 属性 用 来 设置 竖 直 方向 渐进 的 结束 位 置 。 

【 例 3-15】 alpha 样式 。 

第 1 步 , 为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-15. HTML ,添加 如 下 代码 : 

<HITML > 

<head> 
< Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf - 8" /> 
<title> alpha </title> 

< style> 

div{position: absolute; left: 50;top: 70; width:150; } 

img{position: absolute; top:20; left:40; 

filter:alpha( opacity = 0, finishopacity = 100, style = 1, startx = 0, starty = 85, finishx = 650, 

finishy = 685)} 

</style> 

</head> 

<body> 

<div> 

<p style= "font — size:48;font - weight :bold;color:red;"> 

Beautiful </p> 

</div> 
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<p>< img src = "images//keyan. jpg"> </p> 
</body> 
</HIML > 


第 2 步 ,运行 程序 ,结果 如 图 3-14 所 示 。 


eaotl 





图 3-14 alpha 样式 结果 


2. blur 滤 镜 
【语法 】 


{filter: blur(add = 属性 值 1,direction = 属性 值 2, strength = 属性 值 3);}. 


作用 : 该 滤 镜 能 够 使 对 象 表现 为 一 种 模糊 的 效果 。 

参数 : 

add 属性 用 来 确定 是 否 在 运动 模糊 中 使 用 原 有 目标 .其 属性 值 有 0 和 1 两 种 ,0 表示 在 
模糊 运动 中 不 使 用 原 有 目标 ,大 多 数 情 况 下 适用 于 图 像 ; 1 代表 在 模糊 运动 中 使 用 原 有 目 
标 ,大 多 数 情况 下 适用 于 文本 。 

direction 属性 用 来 表示 模糊 移动 时 的 角度 ,其 属性 值 的 范围 为 0" 一 360°。 

strength 属性 用 来 表示 模糊 移动 时 的 距离 ,该 属性 值 可 以 任意 设置 。 

【 例 3-16】 blur 样式 。 


第 1 步 , 为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-16. HTML ,添加 如 下 代码 : 


< HTML > 
<head > 
< Meta http - equiv = "Content - Type" content = "text/HIML; charset = utf - 8" /> 
<title> blur </title> 
<style> 
.blur { 
filter: url(blur. svg# blur); <! —— FireFox, Chrome, Opera ——> 
— Webkit ~ filter: blur(10px); <! -- Chrome, Opera 一 一 > 
— moz— filter: blur(10px); 
—ms— filter: blur(10px); 
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filter: blur(10px); 
filter: progid:DXImageTransform .Microsoft. Blur(PixelRadius = 10, MakeShadow = false); 
<! -- IE6 一 IE9 -->} 
</style> 
</head> 
<body> 
< img src = "images//keyan. jpg" /> 
< img src = "images//keyan. jpg" class = "blur" /> 
</body> 
</HTML > 


第 2 步 , 运 行程 序 , 结 果 如 图 3-15 所 示 。 





图 3-15 blur 样式 结果 


3. dropshadow 滤 镜 
【语法 】 
{filter: dropshadow(color = 属性 值 1,offx= 属性 值 2, offy = 属性 值 3,positive = 属性 值 4);}. 


作用 : 滤 镜 用 来 产生 图 像 的 重 琶 效果 ,添加 对 象 的 阴影 效果 。dropshadow 属性 对 图 像 
的 支持 不 好 ,因为 这 种 图 像 的 颜色 很 丰富 ,很 难 找到 一 个 投射 阴影 的 位 置 。 

参数 : 

color 属性 用 来 设置 投射 阴影 的 颜色 。 

offx 属性 值 代表 投影 文字 与 原文 字 之 间 水 平方 向 的 偏 移 量 。 

offy 属性 代表 投影 文字 与 原文 字 之 间 垂 直方 向 上 的 偏 移 量 。 

positive 属性 是 一 个 布尔 值 (0 或 者 1) :如果 为 true( 非 0) ,那么 就 为 任何 非 透 明 像素 建 
立 可 见 的 投影 ; 如 果 为 false(0) ,那么 就 为 透明 的 像素 部 分 建立 透明 效果 。 
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【 例 3-17】 dropshadow 样式 。 
第 1 步 , 为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-17. HTML ,添加 如 下 代码 : 


<HIML > 
< head> 
<title> dropshadow </title> 
< style> 
div {position:absolute; top:20;width:300; font - family:matisse itc; font - size:64; font 
— weight: bold; color: # CC00CC; filter: dropshadow (color = # ffccff, offx = 15, offy = 10, 
positive= 1);} 
<! -- 定义 DIV 范围 内 的 样式 ,绝对 定位 ,投影 的 颜色 为 #FFCCEF， 
投影 坐标 为 向 右 偏 移 15 个 像素 ,向 下 偏 移 10 个 像素 --> 
</style> 
</head> 
<body> 
<div> Love Leaf </div> 


pe Love, Leaf 


</HTML > 
上 0 _ 3-16 dropshadow 样式 结果 
第 2 步 , 运 行程 序 , 结 果 如 图 3-16 所 示 。 
4. glow 滤 镜 
【语法 】 


{filter: glow(color = 属性 值 1, strength= 属性 值 2);}. 


作用 : 该 滤 镜 能 够 在 原 对 象 周围 产生 一 种 类 似 发 光 的 效果 。 

参数 : 

color 属性 指定 发 光 的 颜色 。 

strength 则 是 发 光 强 度 的 表现 ,也 指 光 晕 的 厚度 ,其 大 小 为 1 一 255。 

【 例 3-18】 glow 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-18. HTML ,添加 如 下 代码 ， 


<HTML > 
<head> 
<title> filter glow</title> 
<Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf -8" /> 
<style> 
.leaf{position:absolute; top:20; width:400; filter: glow(color = #FF3399, strength = 15);} 
. weny{position:absolute; top:70; left:50; width:00;filter:glow(color = #9966CC, strength = 
10);} 
p{font - family:bailey; font — size:48pt;font ~ weight:bold; color: #99CC66;} 
</style> 
</head> 
<body> 
<div class = "leaf"> 
<p style= "ont - family:lucida handwriting; font— size:54pt;font — weight: bold; color: 
#003366;"> 
Leaf Mylove </p> 
</div> 
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<div class = "weny"> 
<p> Weny Good!</p> 
</div> 

</body> 

</HIML > 


第 2 步 ,运行 程序 ,结果 如 图 3-17 所 示 。 


3-17 glow 样式 结果 


5. chroma 滤 镜 
【 话 法 】 
{filter: chroma(color = 属性 值 1);} 


作用 : 该 滤 镜 能 够 使 图 像 中 的 某 一 颜色 变 为 透明 色 。chroma 属性 对 于 图 片 文件 不 是 
很 适合 ,因为 很 多 图 片 经 过 了 减 色 和 压缩 处 理 ( 如 JPG、GIF 等 格式 ) ,所 以 它们 很 少 有 固定 
的 位 置 可 以 设置 为 透明 。 

参数 ; color 属性 用 来 指定 要 变 为 透明 色 的 颜色 。 通 过 该 属性 值 的 设 定 ,可 以 过 滤 某 图 
像 中 的 指定 颜色 。 

【 例 3-19】 chroma 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-19. HTML, 添 加 如 下 代码 : 


<HIML> 
<head> 

< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"” /> 
<title> chroma filter </title> 
<style> <! -一 
div{position:absolute; top:70; left:50;filter:chroma(color = green)} 
p{font - family:bailey;font - size:68;font ~ weight:bold;color:green} 
em{font - family:lucida handwriting italic;font -~ size:68; 

font - weight :bold;color:rgb(255,51,153)} 

-—-></style> 
</head> 
<body> <div> <p>JUST <em>DO IT</em></p> 
</div> 
</body> 
</HTML> 


第 2 步 ,运行 程序 ,结果 如 图 3-18 所 示 。 绿 色 的 JUST 字体 不 见 了 ,实际 上 它 是 透明 
了 ,在 IE i I 还 会 显示 出 来 ,如 图 3-19 所 示 。 


SS DO LT 
Su/ Re 


图 3-18 ”chroma 样式 结果 1 
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图 3-19 chroma 样式 结果 2 





6. wave 滤 镜 
【 话 法 】 


{filter: wave(add = 属性 值 1, freq = 属性 值 2, lightstrength = 属性 值 3, phase = 属性 值 4， 
strength = 属性 值 5);}. 


作用 : 该 滤 镜 能 够 使 被 过 滤 对 象 生 成 正弦 波形 ,从 而 能 造成 一 种 变形 幻觉 。 

参数 : 

add 属性 是 一 个 布尔 值 , 用 来 决定 是 否 将 原始 图 像 加 入 最 后 的 效果 中 。 

freq 属性 是 指 波纹 的 频率 ,也 就 是 指定 在 对 象 上 一 共 需 要 产生 多 少 个 完整 的 波纹 。 

phase 属性 用 来 设置 正弦 波 的 偏 移 量 , 它 决定 波形 的 形状 ,其 属性 值 的 取 值 范围 为 
0" 一 360"。 

lightstrength 属性 用 来 对 波纹 增强 光影 的 效果 ,其 取 值 范 围 为 0 一 100。 

strength 属性 用 来 决定 波纹 振幅 的 大 小 。 

【 例 3-20】 wave 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 , 命 名 为 Ex3-20. HTML, 添 加 如 下 代码 : 


<HIML> 
<head> 
< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf -8" /> 
<title> wave CSS </title> 
<style> 

. leaf{position:absolute; top:10;width:300; filter:wave(add = true, freq = 3, lightstrength 
=100, 

phase = 45, strength = 20);} 

<! --//* 设 置 leaf 类 的 样式 ,绝对 定位 , wave 属性 ,产生 3 个 波纹 , 光 强 为 100, 波纹 从 162* 
(360* 45% ) 开 始 ,振幅 为 20 * // 一 -> 
</style> 
</head> 
<body> 
<div class = "leaf"> 
<p style= "font - family:lucida handwriting; 

font ~ size:72pt; font ~ weight:bold; 
color:rgb(189,1,64);"> Leaf </p> 

</div> 
</body> 
</HTML > 


2 步 ,运行 程序 ,结果 如 图 3-20 所 示 。 
第 2 步 ,运行 程序 ,结果 如 图 3-20 所 示 六 二 0 ave 料 寺 结 第 
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7. shadow 滤 镜 
【 话 法 】 


{filter: shadow(color = 属性 值 1, direction = 属性 值 2);}. 


作用 : 该 滤 镜 能 够 使 对 象 产生 一 种 阴影 效果 。 

参数 : 

color 属性 用 来 设置 阴影 的 颜色 。 

direction 属性 用 来 设置 投影 的 方向 , 取 值 范围 为 0" 一 360" ,其 中 0" 代表 垂直 向 上 ,然后 
每 45 为 一 个 单位 ,该 属性 的 默认 值 是 向 左 的 270 。 

【 例 3-21】 shadow 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-21. HTML, 添 加 如 下 代码 : 





<HITML > 

<head > 

< Meta http - equiv = "Content - TYpe"” content = "text/HTML; charset = utf - 8" /> 

<title> shadow CSS </title> 

<style> 

ee 

. Shadow{ position:absolute; top:100;left:80;filter:shadow(color = red, direction = 60);} 
--> 

</style> 

</head> 

<body> 

<div class = "shadow"> 

<p style= "font - family: 隶 书 ,宋体 ; font - size:60pt; font - weight:bold;color:blue;"> 欢 迎 光 


临 </P></div> 

光临 
</HTML > 多 过 

第 2 步 ,运行 程序 ,结果 如 图 3-21 所 示 。 图 3-21 shadow 样式 结果 

8. mask 滤 镜 

【语法 】 


{filter: mask(color = 属性 值 ) ;} 


作用 : 该 滤 镜 能 够 利用 一 个 HTML 对 象 在 另 一 个 对 象 上 产生 图 像 的 遮 音 ,可 以 为 对 象 
建立 一 个 覆盖 于 表面 的 膜 ,其 效果 就 像 戴 着 有 色 了 眼镜 看 物体 一 样 。 

参数 : color 属性 用 来 制定 要 被 谈 畦 的 颜色 。 

【 例 3-22】 mask 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-22. HTML ,添加 如 下 代码 : 
<HITML > 

<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8" /> 
<title> mask filter </title> 


<style> 


<! -- //* 定义 DIV 区域 的 样式 ,绝对 定位 , mask 属性 的 color 参数 值 指定 用 什么 颜色 遮 住 对 象 
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*// --> 
div{position:absolute;top: 20;left: 40; filter:mask(color: #666699);} 
p{font - family:bailey;font - size:72pt; font - weight:bold; color:#FF9900:} 
</style> 
</head> 
<body> 
<div> <p> wenyleaf </p> </div> 

</body> 

</HTML > 


第 2 步 , 运 行程 序 , 图 3-22(a)、(b) 分 别 是 添加 mask 样式 前 后 的 结 


weno] WE 


(a) 添加 mask 样 式 前 (b) 添加 mask 样 式 后 
图 3-22 ”mask 样式 结果 


9. light 滤 镜 
【语法 】 


{filter: light;}. 


作用 : 该 滤 镜 能 够 使 HTML 对 象 产 生 一 种 模拟 光源 的 投射 效果 。light 可 用 的 方 


法 有 : 


可 以 
性 。 


向 的 ， 
它 通 


AddAmbient, 加 入 包围 的 光源 。 

AddCone, 加 入 锥 形 光源 。 

AddPoint, 加 入 点 光源 。 

Changcolor, 改 变 光 的 颜色 。 

Changstrength ,改变 光源 的 强度 。 

Clear, 清 除 所 有 光源 。 

MoveLight ,移动 光源 。 

可 以 定 光 源 的 虚拟 位 置 , 以 及 通过 调整 X 轴 和 YY 轴 的 数值 来 控制 光源 焦点 的 位 置 ,还 
调整 光源 的 形式 (点 光源 或 者 锥 形 光 源 ) 指 定 光 源 是 否 模糊 边界 .光源 的 颜色 .亮度 等 属 
如 果 动 态 地 设置 光源 ,可 能 会 产生 一 些 意 想不到 的 效果 。 

(1) addAmbient (CiRed,iGreen,iBlue,iStrength) : 为 滤 镜 添加 环境 光 。 环 境 光 是 无 方 
并 且 均 匀 地 酒 在 页 面 的 表面 。 环 境 光 有 颜色 和 强度 值 ,可 以 为 对 象 添加 更 多 的 颜色 。 
常 和 其 他 光一 起 使 用 ,无 返回 值 。 参 数 如 下 。 

iRed: 必 选 项 。 整 数值 (Integer) ,指定 红色 值 , 取 值 范围 为 0 一 255 。 

iGreen: 必 选 项 。 整 数值 (Integer) 。 指 定 绿色 值 , 取 值 范 围 为 0 一 255。 

iBlue: 必 选 项 。 整 数值 (Integer) 。 指 定 蓝 色 值 , 取 值 范围 为 0 一 255 。 

iStrength: 必 选 项 。 整 数值 (Integer) 。 指 定 光 强度 , 取 值 范围 为 0 一 100。 

(2) addCone(iX1,iY1,iZ1,iX2,iY2,iRed,iGreen,iBlue,iStrength,iSpread): 为 滤 镜 
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添加 锥 形 光 ,以 向 对 象 的 表面 投射 有 方向 的 光束 。 光 束 会 随 延 伸 的 距离 而 逐渐 减弱 ,无 返回 
值 。 参 数 如 下 。 

iX1: 必 选 项 。 整 数值 (Integer) 。 指 定 光 源 的 左 坐 标 值 。 

iY1: 必 选 项 。 整 数值 (Integer) 。 指 定 光 源 的 上 坐标 值 。 

iZ1: 必 选 项 。 整 数值 (Integer) 。 指 定 光 源 的 Z 坐标 值 。 

iX2: 必 选 项 。 整 数值 (Integer) 。 指 定 光 焦点 的 左 坐标 值 。 

iY2: 必 选 项 。 整 数值 (Integer) 。 指 定 光 焦点 的 上 坐标 值 。 

iRed: 必 选 项 。 整 数值 (Integer) 。 指 定 红色 值 , 取 值 范围 为 0 一 255。 

iGreen: 必 选 项 。 整 数值 (Integer) 。 指 定 绿色 值 , 取 值 范 围 为 0 一 255 。 

iBlue: 必 选 项 。 整 数值 (Integer) 。 指 定 蓝 色 值 , 取 值 范围 为 0 一 255。 

iStrength: 必 选 项 。 整 数值 (Integer) 。 指 定 光 强度 , 取 值 范围 为 0 一 100。 

iSpread: 必 选 项 。 整 数值 (Integer)。 指 定 光源 的 虚拟 位 置 与 对 象 的 表面 之 间 的 角度 
或 张 度 , 取 值 范围 为 0 一 90。 

(3) addPoint (CiX,iY,iZ,iRed,iGreen,iBlue,iStrength) ,为 滤 镜 添加 点 光源 ,无 返回 
值 ,参数 说 明 如 下 。 

iX: 必 选 项 。 整 数值 (Integer) 。 指 定 光源 的 左 坐标 值 。 

iY: 必 选 项 。 整 数值 (Integer) 。 指 定 光源 的 上 坐标 值 。 

这 : 必 选 项 。 整 数值 (Integer) 。 指 定 光源 的 Z 坐标 值 。 

iRed: 必 选 项 。 整 数值 (Integer) 。 指 定 红色 值 , 取 值 范围 为 0 一 255。 

iGreen: 必 选 项 。 整 数值 (Integer)。 指 定 绿色 值 , 取 值 范围 为 0 一 255。 

iBlue: 必 选 项 。 整 数值 (Integer) 。 指 定 蓝 色 值 , 取 值 范围 为 0 一 255 。 

iStrength: 必 选 项 。 整 数值 (Integer) 。 指 定 光 强度 , 取 值 范围 为 0 一 100。 

(4) changeStrength (iLightrNumber,iStrength,fAbsolute) ,改变 光 的 强度 。 无 返回 值 ， 
参数 说 明 如 下 。 

iLightNumber: 必 选 项 。 整 数值 (Integer) 。 指 定 光 的 标识 符 。 

iStrength: 必 选 项 。 整 数值 (Integer) 。 指 定 光 强 度 , 取 值 范 围 为 0 一 100。 

fAbsolute: 必 选 项 。 布 尔 值 (Boolean) 。 指 定 改变 是 替换 当前 设置 的 绝对 值 , 还 是 加 到 
当前 设置 的 相对 值 。 此 参数 不 等 于 零 表 示 采 用 绝对 值 ,否则 表示 采用 相对 值 。 

(5) changeColor (iLightrNumber.iRed,iGreen,iBlue,fAbsolute): 改变 光 的 颜色 。 无 
返回 值 ,参数 说 明 如 下 。 

iLightNumber: 必 选 项 。 整 数值 (Integer)。 指 定 光 的 标识 符 。 

iRed: 必 选 项 。 整 数值 (Integer) 。 指 定 红色 值 , 取 值 范 围 为 0 一 255。 

iGreen: 必 选 项 。 整 数值 (Integer) 。 指 定 绿色 值 , 取 值 范围 为 0 一 255。 

iBlue: 必 选 项 。 整 数值 (Integer) 。 指 定 蓝 色 值 , 取 值 范围 为 0 一 255 。 

fAbsolute: 必 选 项 。 布 尔 值 (Boolean) 。 指 定 改变 是 替换 当前 设置 的 绝对 值 , 还 是 加 到 
当前 设置 的 相对 值 。 此 参数 不 等 于 零 表 示 采 用 绝对 值 , 否 则 表示 采用 相对 值 。 

(6) clear () ,清除 所 有 与 当前 滤 镜 关联 的 光 。 无 返回 值 。 

移动 锥 形 光 的 焦点 或 点 光 的 原点 。 对 于 锥 形 光 来 说 ,此 方法 改变 rz,y 目标 坐标 值 ; 对 
于 点 光 来 说 ,此 方法 改变 rz,y,z 源 坐标 值 。 此 方法 不 作用 于 环境 光 。 
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(7) moveLight (iLightNumber,iX.iY ,这 ,fAbsolute) ,移动 光源 。 无 返回 值 ,参数 说 明 
如 下 。 

iLightNumber: 必 选 项 。 整 数值 (Integer) 。 指 定 光 的 标识 符 。 

这 : 必 选 项 。 整 数值 (Integer) 。 指 定 光 源 的 左 坐 标 值 。 

iY: 必 选 项 。 整 数值 (Integer) 。 指 定 光 源 的 上 坐标 值 。 

这 : 必 选 项 。 整 数值 (Integer) 。 指 定 光 源 的 Z 坐标 值 。 

fAbsolute: 必 选 项 。 布 尔 值 CBoolean) 。 指 定 改 变 是 替换 当前 设置 的 绝对 值 , 还 是 加 到 
当前 设置 的 相对 值 。 此 参数 等 于 true 表示 采用 绝对 值 , 等 于 false 表示 采用 相对 值 。 

【 例 3-23】 light 滤 镜 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-23. HTML, 添 加 如 下 代码 : 


<HTML > 
<head> 
< Meta http ~ equiv = "Content - Type" content = "text/HTML; charset = utf - 8" /> 
<title> light CSS </title> 
</head> 
<body> 
< img id= "lightsy" src = "images//c. jpg" width = "400" height = "260" style = "filter: light 
(enabled=1)"> 
< script type = "text/javascript"> 
window. onload = setlightsl ; 
lightsy. onmousemove = mousehandler ; 
function setlightsl(){ 
lightsy. filters[0].addcone(380, - 20,5,100,100,255,255, 0, 40,25); } 
function mousehandler( ){ 
x= (window. event.x— 40); 
y= (window. event. y— 40); 
lightsy. filters[0].movelight(0,x,y,5,1); } 
</script > 
</body> 
</HTML > 


第 2 步 , 运 行程 序 , 结 果 如 图 3-23 所 示 。 图 3-23(a) 、(b) 分 别 是 初始 页 面 和 鼠标 移动 之 
后 的 效果 。 








《(a) 初始 页 面 (b) 鼠标 移动 后 的 页 面 


图 3-23 light 样式 结果 
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10. gray 滤 镜 .invert 滤 镜 .xray 滤 镜 

【语法 】 

{filter: gray; } 

{filter: invert;} 

{filter: xray; } 

作用 : gray 滤 镜 能 使 一 张 彩色 图 片 转变 为 灰色 调 图 像 。Invert 滤 镜 能 使 图 像 产生 照片 
底片 的 效果 。xray 滤 镜 能 让 对 象 反映 出 它 的 轮廓 ,并 把 这 些 轮廓 加 亮 显示 。 这 3 个 滤 镜 都 
没有 附带 参数 。 

【 例 3-24】 gray ,invert 和 xray 滤 镜 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-24. HTML ,添加 如 下 代码 : 


<HTML > 

< head>< title > gray invert xray CSS </title> 

</head> 

<body> 

< img src= "images//c. jpg" alt = gray width= 210 height = 130 style= "filter:gray"> 

< img src= "images//c. jpg" alt = invert width = 210 height = 130 style = "filter: invert"> 
< img src= "images//c. jpg" alt = xray width= 210 height = 130 style = "filter:xray"> 
</body> 

</HTML > 


第 2 步 , 运 行程 序 , 结 果 如 图 3-24 所 示 , 从 左 到 右 分 别 为 gray invert 和 xray 滤 镜 的 效 
果 图 。 





图 3-24 gray \invert 和 xray 滤 镜 的 效果 


3.4 ”CSS 页 面 布局 


3.4.1 文本 对 齐 


1. 文本 横向 排列 (text-align) 

文本 水 平 对 齐 可 以 控制 文本 的 水 平 对 齐 方式 ,而 且 不 仅 限 于 文字 内 容 , 也 包括 设置 图 
片 .影像 资 料 的 对 齐 方 式 。 

【语法 】 

text - align: 参数 . 


参数 的 取 值 : 
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left, 左 对 齐 。 

right, 右 对 齐 。 

center, 居 中 对 齐 。 

justify, 相 对 左右 对 齐 。 

需要 注意 的 是 ,text-align 是 块 级 属性 ,只 能 用 在 <p>,< blockquote >,< ul >,< hl > 一 
<h7 > 等 标识 符 里 。 

2. 文本 纵向 排列 (vertical-align) 

文本 的 垂直 对 齐 应 当 是 相对 于 文本 母体 (或 父 元 素 ) 的 位 置 而 言 的 ,不 是 指 文 本 在 网 页 
里 垂直 对 齐 。 例 如 ,表格 的 单元 格 里 一 段 文本 设置 为 垂直 居中 ,文本 将 在 单元 格 的 正中 显 
示 ,而 不 是 整个 网 页 的 正中 。 垂 直 对 齐 属性 只 对 行内 元 素 有 效 。 


【 话 法 】 

vertical - align: 参 数 . 

参数 取 值 : 

Top ,把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 。 
bottom, 底 对 齐 。 


text-top, 把 元 素 的 项 端 与 父 元 素 字 体 的 顶端 对 齐 。 

text-bottom, 相 对 文本 底 对 齐 。 

middle, 中 心 对 齐 。 

sub, 以 下 标的 形式 显示 。 

super, 以 上 标的 形式 显示 。 垂 直 对 齐 属 性 只 对 行内 元 素 有 效 。 

baseline, 是 vertical-align 的 默认 值 。 元 素 放置 在 父 元 素 的 基线 上 。vertical-align: 十 / 
一 n px 元 素 相 对 于 基线 向 下 偏 移 个 像素 。 也 可 以 使 用 百分比 vertical-align: 十 /一 n%， 
通过 距离 升 高 ( 正 值 ) 或 降低 ( 负 值 ) 元 素 ,'0cm' 等 同 于 'baseline'。 

例如 ,. test{vertical-align: -10% ;) ,假设 这 里 的 . test 的 标签 继承 的 行 高 是 20 像素 ,这 
里 的 vertical-align: 一 10% 代 表 的 实际 值 是 : 一 10% X20 二 2( 像 素 )。IE6/1E7 浏览 器 下 的 
vertical-align 的 百分比 值 不 支持 小 数 line-height, 而 Firefox 3.6 等 可 以 支持 。 

“ 行 高 "顾名思义 指 一 行文 字 的 高 度 ,具体 是 指 两 行文 字 间 基线 之 间 的 距离 。 基 线 是 在 
英文 字母 中 用 到 的 一 个 概念 ,使 用 的 四 线 格 英语 本 子 每 行 有 四 条 线 , 如 图 3-25 所 示 , 其 中 底 
部 第 二 条 线 就 是 基线 ,是 a,c,z,x 等 字母 的 底 边 线 。 四 线 格 从 上 到 下 对 应 的 vertical-align 
的 4 个 位 置 : 顶 线 .中 线 、 基 线 和 底线 ,如 图 3-26 所 示 。 


图 3-25 英文 字母 的 四 线 格 
不 同 浏览 器 由 于 兼容 性 问题 ,可 能 效果 会 不 一 样 。 知 道 了 vertical-align 垂直 对 齐 的 含 
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义 , 不 少 经验 尚 浅 的 同行 会 试 着 使 用 这 个 属性 实现 一 些 垂 直方 向 上 的 对 齐 效果 ,会 发 现 有 时 
候 可 以 ,有 时 候 又 不 起 作用 。 因 为 display 有 很 多 属性 值 ,其 中 inline/inline-block/block 3 
个 最 常见 。 而 vertical-align 是 inline-block 依赖 型 元 素 ,只 有 一 个 元 素 属 于 inline 或 是 
inline-block(table-cell 也 可 以 理解 为 inline-block 水 平 ) 水 平 ,其 身上 的 vertical-align 属性 
才 会 起 作用 。 所 以 ,类似 下 面 的 代码 就 不 会 起 作用 。 


span{vertical - align:middle;} 
div{vertical - align:middle;} 


图 片 按钮 单 复 选 框 ,单行 /多 行文 本 框 等 HTML 控件 ,在 默认 情况 下 对 vertical-align 
属性 起 作用 。 

【 例 3-25】 vertical-align 垂直 对 齐 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-25. HTML, 添 加 如 下 代码 : 


<HTML > 
<head> 
< style> 
. box{background:black; color:white; padding — left:20px;} 
.dotl { display: inline - block; width: 4px; height: 4px; background: white; vertical - align: 
baseline;} 
. dot2 { display: inline - block; width: 4px; height: 4px; background: white; vertical - align: 
middle;} 
.dot3{display: inline - block; width:4px; height:4px; background:white; vertical - align:top;} 
.dot4{display: inline - block; width: 4px; height:4px; background:white; vertical - align: text 
~ top;} 
.dot5{display: inline - block; width:4px; height:4px; background:white; vertical - align: text 
— buttom;} 
. dot6 { display: inline - block; width: 4px; height: 4px; background: white; vertical - align: 
buttom; } 
</style> 
</head> 
<body> 
< span class = "box"> 
< span class = "dot1"></span> 我 是 baseline. 
</span> 
< span class = "box"> 
< span class = "dot2"></span> 我 是 middle. 
</span> 
< span class = "box"> 
< span class = "dot3"></span> 我 是 top. 
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</span> 
< span class = "box"> 
< span class = "dot4"></span> 我 是 text - top. 
</span> 
< span class = "box"> 
< span class = "dot5"></span> 我 是 text - buttonm. 
</span> 
< span class = "box"> 
< span class = "dot6"></span> 我 是 buttom. 
</span> 
</body> 
</HTML> 


第 2 步 , 运 行程 序 , 结 果 如 图 3-27 所 示 。 








:我 是 buttom. 


3-27 ”vertical-align 垂直 对 齐 结果 


3. 文本 缩 进 (text-indent) 

文本 缩 进 可 以 使 文本 在 相对 段 默认 值 较 窗 的 区 域 里 显示 ,主要 用 于 中 文 版 式 的 首 行 缩 
进 ,或 者 将 大 段 的 引用 文本 和 备注 做 成 缩 进 的 格式 。 

【 话 法 】 

text - indent 缩 进 距 离 


缩 进 距离 取 值 : 带 长 度 单位 的 数字 ;比例 关系 。 

需 注意 的 是 ,text-indent 也 是 块 级 属性 ,只 能 用 在 <p>,< blockquote >,< ul >,< hl > 一 
<h7 > 等 标识 符 里 。 

【 例 3-26】 text-indent 样式 。 

第 1 步 ,为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-26. HTML, 添 加 如 下 代码 ， 


<HTML > 

<head > 

< style type = "text/CSS"> 
p {text - indent: lcm} 
</style> 

</head> 

<body> 

<p> 


文本 缩 进 可 以 使 文本 在 相对 段 默认 值 较 窗 的 区 域 类 显示 ,主要 用 于 中 文 版 式 的 首 行 缩 
进 ,或 者 将 大 段 的 引用 文本 和 备注 做 成 缩 进 的 格式 。 
</p> 


</body> 
</HTML> 


第 2 步 , 运 行程 序 , 结 果 如 图 3-28 所 示 。 
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3.4.2 盒子 模型 

CSS 中 所 有 页 面 元 素 都 包含 在 一 个 矩形 框 内 ,这 个 矩形 框 称 为 盒子 。 盒 子 描述 了 元 素 
及 属性 在 页 面 布局 中 所 占 空间 的 大 小 ,因此 盒子 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 

盒子 模型 用 于 设置 元 素 的 边界 .边界 补 白 ,边框 等 属性 值 , 使 用 这 一 属性 的 大 多 是 块 
素 。W3C 组 织 建议 把 所 有 网 页 上 的 对 象 都 放 在 一 个 盒子 (box) 中 ， Re 
义 来 控制 这 个 盒子 的 属性 ,这 些 对 象 包括 段落 .列表 、 标 题 ` 图 片 以 及 层 。 盒 子 模型 主要 定义 
四 个 区 域 : 内 容 (content)、 页 边 距 或 补 白 (padding)、 边 界 (border) 和 外 边 距 (margin)。 
content 是 盒子 模型 中 必需 的 部 分 ,可 以 是 文字 、 图 片 等 元 素 。padding 也 称 页 边 距 或 补 白 ， 
用 来 设置 内 容 和 边框 之 间 的 距离 。border 可 以 设置 内 容 边 框 线 的 粗细 、 颜 色 和 样式 等 。 
margin 是 边 距 ,用 来 设置 内 容 与 内 容 之 间 的 距离 。margin,padding,content,border 之 间 的 
层次 .关系 和 相互 影响 的 盒子 模型 如 图 3-29 所 示 。 
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图 3-29 方 框 盒子 模型 











(1) margin: 包 括 margin-top,margin-right, margin-bottom, margin-left ,控制 块 级 元 素 
之 间 的 距离 ,它们 是 透明 不 可 见 的 。 对 于 上 、 右 \ 下 、 左 ， Top 
margin 值 均 为 40 像素 ,因此 代码 为 ， 


margin ~ top: 40px;margin ~ right: 40px;margin ~ bottom: 40px; Left 





margin— left: 40px; Right 
根据 上 、 右 \ 下 、 左 的 顺 时 针 规 则 ,简写 为 margin: 40px 40px 
40px 40px; 为 便于 记忆 ,请 参考 图 3-30 所 示 的 顺序 书写 。 7 


Bottom 


图 3-30 margin 四 个 位 置 的 
margin: 40px 50px; 书写 顺序 


当 上 \ 下 , 左 、 右 margin 值 分 别 一 致 时 ,可 简写 为 : 
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40px 代表 上 、 下 margin 值 ,50px 代表 左 、 右 margin 值 。 
当 上 、 下 , 左 、 右 margin 值 均一 致 时 ,可 简写 为 : 


margin: 40px; 
当 上 、 下 margin 值 不 一 致 ,而 左 、 右 margin 值 均一 致 时 ,可 简写 为 : 
margin: 40px 50px 20px; 


40px,20px 代表 上 、 下 margin 值 ,50px 代表 左右 margin 值 。 

由 此 可 见 , 如 果 只 提供 一 个 数 ,将 用 于 全 部 的 四 条 边 ; 如 果 提 供 两 个 数 ,第 一 个 用 于 上 、 
下 ,第 二 个 用 于 左 \、 右 ; 如 果 提 供 三 个 数 ,第 一 个 用 于 上 ,第 二 个 用 于 左右 ,第 三 个 用 于 下 ; 
如 果 提 供 四 个 参数 值 ,将 按 上 .、 右 、 下 、 左 的 顺序 作用 于 四 边 。 

margin 不 会 在 绝对 元 素 上 折 又 。 假 设 有 一 个 margin-bottom 值 为 20px 的 段落 ,段落 
后 面 是 一 个 具有 30px 的 margin-top 的 图 片 ,那么 ,段落 和 图 片 之 间 的 空间 不 会 是 50px 
(20px 十 30px) ,而 是 30px(30px 二 20px)。 这 就 是 所 谓 的 margin-collapse, 两 个 margin 会 
合并 ( 折 番 ) 成 一 个 margin。 

绝对 定位 元 素 不 会 像 那样 进行 margin 的 折 释 。 这 会 使 它们 与 预期 的 不 一 样 。 

【 例 3-27】 margin 的 样式 示例 。 

第 1 步 ,为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-27. HTML, 添 加 如 下 代码 : 


<HTML > 
< head > 
< style type = "text/CSS"> 
#ID1 { 
background - color: #333; 
color: # FFF; 
margin:10px; 
} 
#ID2 { 
font: normal 14px/1.5 Verdana, sans — serif; 
margin:30px; 
border: 1px solid #F00; 
于 
</style> 
</head> 
<body> 
<div id= "ID1"> 
Hello, world 
<hl id = "ID2"> Margins of ID1 and ID2 collapse vertically.< br/> 
元 素 ID1 与 ID2 的 margins 在 垂直 方向 折 秋 .</hl > 
</div> 
</body> 
</HTML > 


第 2 步 , 运 行程 序 ,结果 如 图 3-31 所 示 。 
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(2) padding: 包 括 padding-top、padding-right、padding-bottom、padding-left, 控 制 块 级 
元 素 内 部 content 与 border 之 间 的 距离 。 简 写 请 参考 margin 属性 的 写法 ,如 


body { padding: 36px;} // 对 象 四边 的 补丁 边 距 均 为 36px 

body { padding: 36px 24px; } // 上 、 下 两 边 的 补丁 边 距 为 36px, 左 、 右 两 边 的 补丁 边 距 
// 为 24px 

body { padding: 36px 24px 18px; } // 上 、 下 两 边 的 补丁 边 距 分 别 为 36px、18px, 左 、 右 两 边 的 补 
// 丁 边 距 为 24px 


body { padding: 36px 24px 18px 12px; } // 上 、 右 \ 下 、 左 补丁 边 距 分 别 为 36px、24px、18px、12px 


(3) border: 简 写 属性 在 一 个 声明 中 设置 所 有 的 边框 属性 。 可 以 按 顺序 设置 如 下 属性 : 
border-width,border-style, border-color。 如 果 不 设 置 其 中 的 某 个 值 ,也 不 会 出 问题 ,例如 
border: solid #ff0000; 也 是 允许 的 。 

border-width 简写 属性 为 元 素 的 所 有 边框 设置 宽度 ,或 者 单独 地 为 各 边 边框 设置 宽度 。 
只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none, 边 框 宽度 实际 上 会 重 置 为 
0。 不 允许 指定 负 长 度 值 。 可 能 的 border-width 取 值 及 其 对 应 的 描述 如 下 。 

thin, 定 义 细 的 边框 。 

medium, 默 认 值 ,定义 中 等 的 边框 。 

thick ,定义 粗 的 边框 。 

length, 人 允许 自 定义 边框 的 宽度 。 

border-style 属性 用 于 设置 元 素 所 有 边框 的 样式 ,或 者 单独 为 各 边 设置 边框 样式 。 只 有 
当 这 个 值 不 是 none 时 ,边框 才 可 能 出 现 。 可 能 的 border- style 取 值 及 其 对 应 的 描述 如 下 。 

none, 定 义 无 边 框 。 

hidden, 与 none 相同 。 不 过 ,应 用 于 表 时 除外 ,对 于 表 ,hidden 用 于 解决 边框 冲突 。 

dotted ,定义 点 状 边框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 。 

dashed ,定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 。 

solid ,定义 实 线 。 

double, 定 义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove, 定 义 3D 四 槽 边框 。 其 效果 取决 于 border-color 的 值 。 

ridge, 定 义 3D 垄 状 边框 ,其 效果 取决 于 border-color 的 值 。 

inset, 定 义 3D inset 边框 ,其 效果 取决 于 border-color 的 值 。 

outset, 定 义 3D outset 边框 ,其 效果 取决 于 border-color 的 值 。 

最 不 可 预测 的 边框 样式 是 double。 它 定义 为 两 条 线 的 宽度 再 加 上 这 两 条 线 之 间 的 空 
间 , 等 于 border-width 值 。 

border-color 属性 设置 四 条 边框 的 颜色 。 此 属性 可 设置 1 一 4 种 颜色 。border-color 属 
性 是 一 个 简写 属性 ,可 设置 一 个 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ,或 者 为 4 个 边 分 别 设置 
不 同 的 颜色 。 简 写 请 参考 margin 属性 的 写法 。 
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border-color: red green blue pink; 

表示 上 边框 是 红色 ,右边 框 是 绿色 ,下 边框 是 蓝 色 ,左边 框 是 粉色 。 
border-color:red green blue; 

表示 上 边框 是 红色 ,右边 框 和 左边 框 是 绿色 ,下 边框 是 蓝 色 。 
border-color: dotted red green; 

表示 上 边框 和 下 边框 是 红色 ,右边 框 和 左边 框 是 绿色 。 
border-color: red; 


表示 所 有 4 个 边框 都 是 红色 。 
可 能 的 border- color 取 值 及 其 对 应 的 描述 如 下 。 
color_name, 规 定 颜色 值 为 颜色 名 称 的 边框 颜色 ,如 red。 
hex_number, 规 定 颜色 值 为 十 六 进 制 值 的 边框 颜色 ,如 #fft0000。 
rgb_number, 规 定 颜色 值 为 rgb 代码 的 边框 颜色 ,如 rgb(255 ,0,0)。 
transparent ,默认 值 。 边 框 颜色 为 透明 。 
【 例 3-28〗 padding 和 border 样式 。 
第 1 步 ,为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-28. HTML ,添加 如 下 代码 : 


<HTML > 
< head> 
< style type = "text/CSS"> 
#ID1 { 
background - color: #333; 
color: # FFF; 
margin:10px; 
padding:15px; 
上‘ 
#ID2{ 
font: normal 14px/1.5 Verdana, sans — serif; 
margin:30px; 
padding:15px; 
border: 1px groove red blue green; 
)} 
</style> 
</head> 
<body> 
<div id= "ID1"> 
Hello, world 
<hl id= "ID2"> Margins of ID1 and ID2 collapse vertically.<br/> 
元 素 ID1 与 ID2 的 margins 在 垂直 方向 折 人 .</hi > 
</div> 
</body> 
</HTML> 


第 2 步 , 运 行程 序 , 结 果 如 图 3-32 所 示 。 
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图 3-32 padding 和 border 样式 结果 


3.4.3 文字 环绕 float 样式 


在 传统 的 印刷 布局 中 ,文本 可 以 按照 需要 围绕 图 片 。 一 般 把 这 种 方式 称 为 "文本 环绕 ”。 
在 网 页 设计 中 ,应 用 了 CSS 的 float 属性 的 页 面 元 素 就 像 在 印刷 布局 里 面 的 被 文字 包围 的 
图 片 一 样 。 

【 话 法 】 


{float: none | left |right} 


参数 值 : 

none: 对 象 不 浮动 。 

left: 对 象 浮 在 左边 。 

right: 对 象 浮 在 右边 。 

【 例 3-29】 float 样式 示例 。 

第 1 步 , 为 CSSWebsites 项 目 添 加 一 个 Web 窗 体 ,命名 为 Ex3-29. HTML, 添 加 如 下 代码 : 
< HTML > 

< head > 

< Meta http - equiv = "Content ~ type" content = "text/HTML; charset =utf -8" /> 

< link rel = "stylesheet" type = "text/CSS" href = "main. CSS” /> 


<title> CSS FLOAT </title> 
< style type = "text/CSS"> 


.top { 
width:500px; /* div 框 的 宽度 */ 
background: # flflfl; /xdiv 框 的 背景 色 */ 
} 
:img { 


float: left; /* 图 片 向 左 浮动 */ 
margin — right:10px; /* 图 片 右 侧 与 文字 的 边 距 x*/ 
margin - bottom: 5px; /* 图 片 下 部 与 文字 的 边 距 */ 

border :thin dotted red; 

} 

</style> 

</head> 

<body> 

<! -- 环绕 的 图 片 及 文字 ,图 片 的 CSS 类 为 ing -> 

< div class = "top"> 

< img src = "images/c. jpg" alt = "文字 环绕 " class = "img" /> 





86 J web 系统 与 技术 





盒子 模型 主要 定义 四 个 区 域 : 内 容 (content) ,页 边 距 (padding)、 边 界 (border) 和 边 距 
(margin) 。 初 学 者 经 常 搞 不 清楚 margin, background-color, background- image, padding， 
content,border 之 间 的 层次 .关系 和 相互 影响 。 这 里 提供 一 张 盒 子 模型 的 3D 示意 图 ,便于 
理解 和 记忆 。 


</div> 
</body> 
</HTML > 


第 2 步 , 运 行程 序 , 结 果 如 图 3-33 所 示 。 


盒 了 模型 主要 定 
义 四 个 区 域 : 
内 容 

(contenL) 、 页 边 
医 距 (padding) 、 
边界 (border a 


















background— 


background-image, pad n 系 种 
响 。 这 里 提供 - 张 盒 子 模型 的 3D 示 意 | 所 ， 彰 人 明生 


图 3-33 float 样式 结果 


注意 : 不 能 在 同一 个 属性 中 应 用 定位 属性 和 浮动 。 因 为 对 使 用 什么 样 的 定位 方案 来 
说 ,两 者 的 指令 是 相 冲 突 的 。 如 果 把 两 个 属性 都 添加 到 一 个 相同 的 元 素 上 ,那么 CSS 取 最 
后 设置 的 那个 属性 。 


3.4.4 元 素 定位 


CSS 提供 position ,top left 和 z-index 属性 ,用 于 在 二 维 或 三 维 空间 定位 某 个 元 素 相 对 
于 其 他 元 素 的 相对 位 置 或 绝对 位 置 。 

1，position 元 素 位 置 模式 

position 属性 用 于 设置 元 素 位 置 的 模式 。 当 position 为 absolute 时 ,top 和 left 属性 分 
别 用 于 设置 元 素 与 窗口 或 框架 上 端 以 及 左 端的 距离 ; 当 position 为 relative 时 ,top 和 left 
属性 分 别 用 于 设置 元 素 与 父 元 素 上 端 以 及 左 端的 距离 。 

定位 模式 规定 了 一 个 盒子 在 总 体 的 布局 上 应 该 处 于 什么 位 置 , 以 及 对 周围 的 盒子 会 有 
什么 影响 。 定 位 模式 包括 了 常规 文档 流 、 浮 动 和 5 种 类 型 的 position 定位 的 元 素 。 

【语法 】 


HTML 标签 { position: absolute | relative | fixed | static| inherit } 


static 是 position 默认 的 属性 值 。 任 何 应 用 了 position: static 的 元 素 都 处 于 常规 文档 
流 中 。 它 处 于 什么 位 置 ,以 及 它 如 何 影响 周边 的 元 素 都 是 由 盒子 模型 决定 的 。 一 个 static 
定位 的 元 素 会 忽略 所 有 top ,right,bottom,left 以 及 z-index 属性 声明 的 值 。 为 了 元 素 能 使 
用 这 些 属性 ,需要 先 为 它 的 position 属性 应 用 这 3 个 值 的 其 中 之 一 : absolute relative、 
fixed。 
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absolute, 绝 对 定位 的 元 素 会 从 常规 文档 流 中 脱离 。 对 于 包围 它 的 元 素 而 言 , 它 会 将 该 
绝对 定位 元 素 视 为 不 存在 。 如 果 需 要 保持 它 所 占有 的 位 置 而 不 被 其 他 元 素 所 填充 ,那么 需 
要 使 用 其 他 的 定位 方式 。 可 以 通过 top,right,bottom 和 left 四 个 属性 来 设置 绝对 定位 元 素 
的 位 置 。 但 通常 只 会 设置 它们 其 中 的 两 个 : top 或 者 bottom, 以 及 left 或 者 right。 默 认 它 
们 的 值 都 为 auto。 

绝对 定位 的 关键 是 起 点 在 哪里 。 如 果 top 被 设置 为 20px, 那 么 这 20px 是 从 哪里 开始 
计算 的 。 一 个 绝对 定位 的 元 素 的 起 点 位 置 是 相对 于 它 的 第 一 个 position 值 不 为 static 的 父 
元 素 而 言 的 。 如 果 在 它 的 父 元 素 链 上 没有 满足 条 件 的 父 元 素 ,那么 绝对 定位 元 素 则 会 相对 
于 文档 窗口 进行 定位 。 在 一 个 元 素 的 样式 上 设置 position: absolute 意味 着 需要 考虑 父 元 
素 , 并 且 如 果 父 元 素 的 position 值 不 为 static, 那 么 绝对 定位 元 素 的 起 点 为 父 元 素 的 左上 角 
位 置 。 如 果 父 元 素 没有 应 用 除了 static 以 外 的 position 定位 ,那么 它 会 检查 父 元 素 的 父 元 
素 是 否 应 用 非 static 定位 。 如 果 该 元 素 应 用 了 定位 ,那么 它 的 左上 角 便 会 成 为 绝对 元 素 的 
起 点 位 置 。 如 果 没 有 , 则 会 继续 向 上 遍历 DOM ,直到 找到 一 个 定位 元 素 或 者 寻找 失败 ,以 
到 达 最 外 层 的 浏览 器 窗口 。 

relative, 相 对 定位 的 元 素 也 是 根据 top,right,bottom 和 left 四 个 属性 来 决定 自己 的 位 
置 的 。 但 只 是 相对 于 它们 原来 所 处 的 位 置 进行 移动 。 从 某 种 意义 上 来 说 ,为 元 素 设 置 相 对 
定位 和 为 元 素 添 加 margin 有 点 相似 ,但 也 有 一 个 重要 的 区 别 。 区 别 就 是 围绕 在 相对 定位 元 
素 附近 的 元 素 会 忽略 相对 定位 元 素 的 移动 。 相 对 定位 元 素 离开 了 正常 文档 流 , 但 仍然 影响 
着 围绕 它 的 元 素 。 这 些 元 素 觉 得 相对 定位 元 素 仍 然 在 正常 文档 流 中 。 

fixed, 固 定 定位 的 行为 类 似 于 绝对 定位 ,但 也 有 一 些 不 同 的 地 方 。 第 一 个 不 同 点 ,固定 
定位 总 是 相对 于 浏览 器 窗口 进行 定位 ,并 且 通 过 top,right,bottom 和 left 属性 决定 其 位 置 ， 
它 抛弃 了 它 的 父 元 素 。 第 二 个 不 同 点 是 继承 性 ,固定 定位 的 元 素 是 固定 的 。 它 们 并 不 随 页 
面 的 滚动 而 移动 。 

2. z-index 空间 中 定位 元 素 

三 维 空间 中 定位 元 素 的 属性 是 z-index, 打 破 了 二 维 平面 的 约束 ,具有 宽度 和 高 度 。z- 
index 属性 设置 元 素 的 堆 释 顺序 。 拥 有 更 高 堆 释 顺序 的 元 素 总 会 处 于 堆 释 顺序 较 低 的 元 素 
的 前 面 ,如 图 3-34 所 示 。 该 属性 设置 一 个 定位 元 素 沿 Z 轴 的 位 置 ,Z 轴 定 义 为 垂直 延伸 到 
显示 区 的 轴 。 如 果 为 正 数 , 离 用 户 更 近 ,为 负数 则 表示 离 用 户 更 远 。 

【 例 3-30】 z-index 样式 示例 。 

第 1 步 ,为 CSSWebsites 项 目 添加 一 个 Web 窗 体 ,命名 为 Ex3-30. HTML, 添 加 如 下 代码 : 


<HIMDL> 

<head> 

< style type = "text/CSS"> 
img 

position:absolute; 

left :Opx; 

top: Opx; 

2— ndex: — 1; 

有 
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较 小 的 z 值 
在 栈 底 


较 大 的 z 值 
在 栈 项 


图 3-34 z-index 的 堆 释 顺序 


</style> 

</head> 

<body> 

<hl style = "color:red"> This is a heading </hl > 

< img src = "images/c. jpg" /> 

<p style = "color:red"> 由 于 图 像 的 z- index 是 -1, 因 此 它 在 文本 的 后 面 出 现 .</p> 
</body> 

</HTML > 


第 2 步 ,运行 程序 ,结果 如 图 3-35 所 示 。 





图 3-35 ”z-index 样式 结果 


由 图 3-35 可 知 ,z-index 高 的 位 于 z-index 低 的 上 面 ,并 朝 页 面 的 上 方 运动 。 相 反 , 一 个 
低 的 z-index 在 高 的 z-index 的 下 面 ,并 朝 页 面 下方 运 动 。 所 有 元 素 默认 的 z-index 值 都 为 
0, 并 且 可 以 对 z-index 使 用 负 值 。 

假如 只 是 开发 简单 的 弹 窗 效果 ,懂得 通过 z-index 来 调整 元 素 间 的 层 琶 关系 就 够 了 。 但 
要 将 多 个 弹 窗 间 层 鱼 关 系 处 理 好 ,那么 充分 理解 z-index 背后 的 原理 及 兼容 性 问题 就 是 必要 
的 知识 储备 了 。 常 接触 到 的 z-index 只 是 分 层 显示 中 的 一 个 属性 ,而 理解 z-index 背后 的 原 
理 实质 上 就 是 要 理解 分 层 显示 原理 。 
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. 简要 说 明 什么 是 CSS。 

. 比较 几 种 网 页 添加 样式 的 方法 。 

. 比较 字体 样式 和 文本 样式 的 区 别 。 

. 设计 一 个 表格 样式 ,其 中 ,整体 表格 的 样式 : 


入 


font - family:"Trebuchet MS", Arial, Helvetica, sans — serif;width:100%; 
border - collapse:collapse; 


表格 标题 的 样式 : 


font - size:l.lem; text—align:left; padding— top:5px; padding - bottom:4px; background 
— color:#A7C942; color: #ffffff; 


表格 奇数 行 数据 的 样式 : 

color: 间 000000; background-color: # EAF2D3; 

表格 偶数 行 数据 的 样式 : 

font-size:lem; border:1px solid #98bf21; padding:3px 7px 2px 7px; 


效果 如 图 3-36 所 示 。 








Company Contact Country 
Apple Steven Jobs USA 
Baidu Li YanHong China 
Google Larry Page USA 
Lenovo Liu Chuanzhi ‘China 
Microsoft _ BilGates UsA 
Nokia Stephen Elop Finland 














图 3-36 表格 CSS 样式 结果 
5. 补 全 下 面 的 代码 ,实现 一 个 < div > 元 素 页 面 布局 样式 ,效果 如 图 3-37 所 示 。 


<! DOCTYPE HTML > 
< HIML lang = "en" xmlns = "http://www.w3.org/1999/xHTML"> 
<head> 
<Meta charset = "utf - 8" /> 
<title></title> 
<style> 
#header { 
background ~ color: black; 
color: white; 


(1) 





padding: 5px; 
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#nav { 
line— height: 30px; 
background — color: # eeeeee; 
height: 300px; 
width: 100px; 

(2) 





padding: 5px; 


# section { 
width: 350px; 
(3) 





padding: 10px; 


#footer { 
background - color: black; 
color: white; 





clear: both; 
(4) 
padding: 5px; 
} 
</style> 
</head> 
<body> 


<div id= "header"> 
<hl > City Gallery</hl > 
</div> 


<div id= "nav"> 
London< br > 
Paris < br> 
Tokyo< br > 
</div> 


<div id= "section"> 
< hl > London </hl > 
<p> 
London is the capital city of England. It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants. 
</p> 
<p> 
Standing on the River Thames, London has been a major settlement for two millennia, its 
history going back to its founding by the Romans, who named it Londinium. 
</p> 
</div> 
<div id= "footer"> 
Copyright W3School. com. cn 
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</div> 
</body > 
</HIML > 


City Gallery 


London 


Paris London 
Tok 

Se London is the capital city of England. It is 
the most populous city in the United 
Kingdom, with a metropolitan area of over 
13 million inhabitants. 


Standing on the River Thames, London has 
been a major settlement for two millennia, 
its history going back to its founding by 
the Romans, who named it Londinium. 


Copyright W3School.com.cn 


图 3-37 页 面 布局 效果 





典 网 站 的 CSS 





网 页 数据 的 有 效 性 验证 


Web 网 页 经 常 需要 用 户 输入 一 些 信息 ,为 了 避免 用 户 输入 无 效 的 数据 ,必须 对 用 户 输 
入 数据 的 有 效 性 进行 检测 。 当 用 户 输入 的 数据 符合 要 求 时 ,验证 控件 是 不 可 见 的 ,只 有 当 用 
户 输入 的 数据 不 符合 要 求 时 ,它们 才 会 显示 出 来 。 


4.1 验证 控件 


4.1.1 验证 控件 分 类 


不 同 种 类 的 数据 验证 控件 完成 不 同 的 数据 验证 工作 ,因此 ,用 户 要 选择 对 应 的 验证 控 
件 。 按 照 控件 的 执行 环境 划分 ,验证 控件 可 以 分 为 以 下 两 类 。 

1. 服务 器 端 验 证 

服务 器 执行 代码 检查 , 当 浏览 器 把 信息 发 送 到 服务 器 时 ,会 引发 一 个 数据 验证 的 处 理 过 
程 。 如 果 在 任意 输入 控件 中 检测 到 错误 的 验证 控件 , 则 网 页 设置 为 无 效 状 态 , 并 发 回 客户 
端 。 验 证 时 间 为 当 页 面 已 经 完成 初始 化 ,但 尚 没有 调用 任何 事件 处 理 程序 时 , 单 击 “提交 ?” 按 
纽 或 按 Enter 键 就 会 验证 。 

2. 客户 端 验证 

在 浏览 器 端 使 用 JavaScript 实现 ,即使 验证 控件 已 在 客户 端 执 行 验证 。 不 需要 Web 服 
务 器 的 配合 ,可 以 缩短 页 面 的 相应 时 间 ,因为 错误 会 被 立即 检查 到 ,将 在 用 户 离开 包含 错误 
的 控件 后 马上 显示 。 


4.1.2 ASP 页 面 验证 控件 


ASP 页 面 针对 必须 输入 值 、 指 定 范围 等 验证 内 容 , 有 6 种 服务 器 验证 控件 ,具体 见 
表 4-1。 























表 4-1 验证 控件 

控件 名 称 说 明 
RequiredFieldValidator 输入 值 域 是 否 为 空 
RangeValidator 输入 值 域 是 否 在 指定 范围 内 
RegularExpressionValidator 输入 值 域 是 否 符合 某 正 则 表达 式 要 求 的 格式 
CompareValidator 输入 值 和 另外 一 个 值 满足 什么 关系 
CustomValidator 定制 的 验证 检查 方式 
ValidationSummary 检验 其 他 验证 控件 的 结果 ,并 集中 显示 
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这 6 种 服务 器 控件 的 公共 属性 见 表 4-2。 
表 4-2 公共 属性 
属性 名称 说 了 明 





指定 一 个 控件 ID ,该 控件 需要 进行 输入 验证 ,如 : 
ControlToValidate | < asp: CustomValidator ControlToValidate = 二 "检查 的 控件 名 "> </asp: 








CustomValidator > 
用 来 显示 错误 信息 ,如 : 
ErrorMessage y ; 
达 asp:CustomValidator ErrorMessage 一 "错误 消息 "> </asp:CustomValidator > 
指定 错误 信息 显示 时 的 颜色 ,如 : 
ForeColor 


<asp:CustomValidator ForeColor 一 "颜色 "></asp:CustomValidator > 
指定 验证 控件 的 错误 信息 如 何 显示 
Display 一 "static", 即 静态 显示 方式 (系统 默认 方式 )。 当 验证 控件 初始 化 时 , 需 
要 在 网 页 上 有 足够 的 空间 来 放置 验证 控件 ; 当 没 有 显示 错误 信息 时 ,验证 控件 
仍然 占据 一 定 的 网 页 位 置 ; 
Display Display 王 "Dynamic" , 即 动态 显示 方式 。 
当 验 证 控件 初始 化 时 ,控件 不 再 占有 网 页 上 的 位 置 ,只 有 在 需要 显示 错误 信息 
时 ,控件 才 会 占有 一 定 的 网 页 位 置 。 
Display 二 "None", 即 不 在 当前 验证 控件 中 显示 错误 信息 ,而 在 网 页 的 总 结 验 证 
控件 ValidationSummary 中 显示 错误 信息 
EnableClientScript 是 否 员 动 窜 访 其 星 证 : 捧 认 村 为 tnue 
若 为 false, 则 启动 Web 服务 器 来 验证 。 采 用 客户 端 验证 可 得 到 较 快 的 处 理 速度 











1， RequiredFieldValidator 控件 一 一 检测 必 填 项 

该 控件 又 称 非 空 验证 控件 ,常用 于 文本 输入 框 的 非 空 验证 。 若 在 网 页 上 使 用 此 控件 , 则 
当 用 户 提交 网 页 到 服务 器 端 时 ,系统 自动 检查 被 验证 控件 的 输入 是 否 为 空 。 如 果 为 空 , 则 网 
页 显示 错误 信息 。 

【语法 】 

< asp:RequiredFieldValidator 

ID= "控件 名 称 " 

runat = "server" 

ControlToValidate = "要 检查 的 控件 名 " 

Display = "Static|Dynamic |None" 

ErrorMessage = "错误 信息 " 

ForeColor = "颜色 值 "> 文本 信息 

</asp:RequiredFieldValidator > 

使 用 的 基本 步 又: 

步骤 1, 在 VS 2013 中 新 建 一 个 网 站 ,并 添加 一 个 Web 窗 体 。 

步骤 2, 从 工具 箱 上 拖 一 个 TextBox 控件 放置 在 Web 窗 体 上 ,让 用 户 输入 数据 。 

步骤 3, 从 工具 箱 上 拖 一 个 RequiredField 控件 放置 在 Web 窗 体 上 。 

步骤 4, 设 置 RequiredField 控件 的 相关 属性 ,主要 有 ControlToValidate、 Display、 
ErrorMessage、ForeColor 4 个 属性 。 
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在 VS 2012 的 .NET 4.5 及 其 以 后 的 版 本 中 都 默认 设置 了 JQuery 的 引用 相关 属性 
Unobtrusive ValidationMode, 但 并 未 对 其 赋值 ,必须 手动 对 其 进行 设置 。 进 行 数据 验证 时 
使 用 的 各 种 validator 需要 在 前 端 调用 JQuery 进行 身份 验证 。 如 果 不 对 该 属性 进行 配置 ， 
将 会 产生 控件 不 显示 信息 的 错误 。 需 要 在 Web. config 文件 中 添加 如 下 代码 : 

<appSettings> 

<add key = "ValidationSettings:UnobtrusiveValidationMode" value = "None" /> 

</appSettings > 

【 例 4-1】 RequiredFieldValidator 示例 。 

第 1 步 ,使 用 VS 2013 创建 一 个 空 网 站 项 目 ValidWebsites ,添加 一 个 Web 窗 体 , 命 名 
为 Ex4-1. aspx, 设 置 为 起 始 页 。 

第 2 步 , 在 Ex4-1. aspx 上 添加 textBox 控件 和 设置 属性 : 


< asp:TextBox ID = "TextBoxl"” runat = "server"></asp:TextBox > 
第 3 步 ,在 Ex4-1. aspx 上 添加 控件 和 设置 属性 ,代码 如 下 : 


<asp:RequiredFieldValidator 

ID= "requiredFieldValidator" 

runat = "server" 

ControlToValidate = "TextBox1" 

Display = "Dynamic" 

ErrorMessage = "必须 输入 用 户 名 !" 
ForeColor = "Red" > 

</asp:RequiredFieldValidator > 


第 4 步 ,在 Web. Config 里 面 添加 以 下 内 容 : 





< appSettings > 
<add key = "ValidationSettings:UnobtrusiveValidationMode" value = "None" /> 
</appSettings > 请 输入 月 户 名 ， | | 
第 5 步 ,运行 程序 ,不 输入 数据 , 单 击 "提交 ”按钮 ,得 到 到] 必 全 输入 用 户 名 | 
如 图 4-1 所 示 的 错误 信息 提示 。 图 4-1 必 填 控件 验证 实例 


2，RangeValidator 控件 一 一 限定 输入 特定 范围 的 数据 

该 控件 又 称 范围 验证 控件 。 当 用 户 输入 不 在 验证 范围 内 的 值 时 ,将 引发 页 面 错误 信息 ， 
该 控件 提供 Integer、String、Date、Double 和 Currency 共 5 种 数据 类 型 的 验证 。 

【 话 法 】 


<asp:RangeValidator ID= "控件 名 称 " 

runat = "server" 

ControlToValidate = "要 检查 的 控件 名 " 

Type = "数据 类 型 " 

MinimumValue = "最 小 值 " 

MaximumValue = "最 大 值 " 

Display= "Static|Dynamic|None”ErrorMessage = "错误 信息 " 
ForeColor = "颜色 值 "> 文本 信息 
</asp:RequiredFieldValidator > 
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使 用 的 基本 步骤 : 

步骤 1, 在 VS 2013 中 新 建 一 个 网 站 ,并 添加 一 个 Web 窗 体 。 

步骤 2, 从 工具 箱 上 拖 一 个 TextBox 控件 放置 在 Web 窗 体 上 ,让 用 户 输 入 数据 。 

步骤 3, 从 工具 箱 上 拖 一 个 RangeValidator 控件 放置 在 Web 窗 体 上 。 

步骤 4, 设置 RequiredField 控件 的 相关 属性 ,主要 有 ControlToValidate、 Display、 
ErrorMessage、ForeColor。Type 用 于 比较 值 的 数据 类 型 ,包含 Integer、 String、Date、 
Double 和 Currency 共 5 种 ,MinimumValue 为 所 验证 的 控件 的 最 小 值 ; MaximumValue 为 
所 验证 的 控件 的 最 大 值 。 

【 例 4-2】 RangeValidator 示例 。 

第 1 步 ,在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 , 命 名 为 Ex4-2. aspx, 设 置 为 起 始 页 。 

第 2 步 , 在 Ex4-2. aspx 添加 如 下 代码 : 


<%@ Page Language = "C#" AutoEventWireup = "true" CodeFile = "Ex4 - 2. aspx,. cs" Inherits = " 
Ex4_2" %> 
<!DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
< head runat = "server"> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
<form id = "form 1" runat = "server"> 
<div> 
请 输入 一 个 1~5 的 数 
<asp:TextBox ID = "TextBox1" runat = "server"></asp:TextBox> 
<asp:RangeValidator 
ID= "rangeValidator" 
runat = "server" 
ErrorMessage = "数字 必须 为 1 一 5" 
ControlToValidate = "TextBox1" 
MaximumValue = "5" 
MinimumValue = "1" 
ForeColor = "Red" 


Type = "Date"> 
</asp:RangeValidator > 
</div> 
<asp:Button ID = "Button1”runat = "server" Text = "提交 " /> 
</form> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,输入 的 数据 如 果 不 在 范围 之 内 ,就 单 击 “ 提 交 ” 按 钮 ,得 到 如 图 4-2 所 
示 的 错误 信息 提示 。 





量 生 “下 和 


图 4-2 范围 控件 验证 实例 
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3. RegularExpressionValidator 控件 一 一 使 用 正则 表达 式 进行 复杂 数据 验证 

该 控件 又 称 正 则 表达 式 验证 控件 , 它 的 验证 功能 比 非 空 验证 控件 和 范围 验证 控件 更 强 
大 ,用 户 可 以 自 定义 或 书写 自己 的 验证 表达 式 。 

【语法 】 


<asp:RegularExpressionValidator 

ID= "控件 名 称 " 

runat = "server" 

ControlToValidate = "要 检查 的 控件 名 " 
ValidationExpression= "正则 表达 式 " 
Display = "Static|Dynamic|None" 
ErrorMessage = "错误 信息 " 

ForeColor = "颜色 值 "> 文本 信息 

</asp: RegularExpressionValidator > 


使 用 的 基本 步骤 : 

步骤 1, 在 VS 2013 中 新 建 一 个 网 站 ,并 添加 一 个 Web 窗 体 。 

步骤 2, 从 工具 箱 上 拖 一 个 TextBox 控件 放置 在 Web 窗 体 上 ,让 用 户 输入 数据 。 

步骤 3, 从 工具 箱 上 拖 一 个 RegularExpressionValidator 控件 放置 在 Web 窗 体 上 。 

步 又 4, 设置 RegularExpressionValidator 控件 的 相关 属性 ,主要 有 ValidationExpression, 用 
于 确定 有 效 性 的 正则 表达 式 。 

【 例 4-3】 RegularExpressionValidator 使 用 实例 。 

第 1 步 ,在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 ,命名 为 Ex4-3. aspx, 设 置 为 起 
始 页 。 

第 2 步 ,在 Ex4-3. aspx 添加 如 下 代码 : 


<%@ Page Language = "C#" AutogventWireup= "true" CodeFile = "Ex4 - 3.aspx.cs" 
Inherits = "Ex4_3" %> 
<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
< head runat = "server"> 
<Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
<form id= "form 1" runat = "server"> 
<div> 
输入 6 位 数字 的 邮政 编码 
< asp:TextBox ID = "TextBox1"”runat = "server"></asp:TextBox> 
< asp:RegularExpressionValidator 
ID = "regularExpressionValidator" 
runat = "server" 
ControlToValidate = "TextBox1" 
ErrorMessage = "邮政 编码 必须 是 6 位 的 !" 
ValidationExpression = "\d{6}" 
ForeColor = "Red"> 
</asp: RegularExpressionValidator > 
<asp:Button ID = "Button1”runat = "server" Text = "提交 " /> 
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</div> 
</form> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,输入 的 数据 如 果 不 在 范围 内 ,就 单 击 “ 提 交 ” 按 钮 ,得 到 如 图 4-3 所 示 
的 错误 信息 提示 。 


由 | 邮政 编码 必须 是 6 位 的 ! 


4-3 正则 表达 式 控件 验证 实例 


4. CompareValidator 控件 一 一 比较 数据 值 .限定 用 户 输入 数据 的 类 型 

该 控件 又 称 比较 验证 控件 ,主要 用 来 验证 TextBox 控件 内 容 或 者 某 个 控件 的 内 容 与 固 
定 表 达 式 的 值 是 否 相 同 。 

【语法 】 

<asp: CompareValidator 

ID= "控件 名 称 " 

runat = "server" 

ControlToValidate = "要 检查 的 控件 名 " 

ValueToCompare = " 常 值 " 

ControlToCompare = " 作 比 较 的 控件 名 " 

Type= "输入 值 " 

Operator = "操作 方法 " 

Display = "Static|Dynamic|None" 

ErrorMessage = "错误 信息 " 

ForeColor = "颜色 值 "> 文本 信息 

</asp:RequiredFieldValidator > 

使 用 的 基本 步 又: 

步骤 1, 在 VS 2013 中 新 建 一 个 网 站 ,并 添加 一 个 Web 窗 体 。 

步骤 2, 从 工具 箱 上 拖 一 个 TextBox 控件 放置 在 Web 窗 体 上 ,让 用 户 输入 数据 。 

步骤 3, 从 工具 箱 上 拖 一 个 CompareValidator 控件 放置 在 Web 窗 体 上 。 

步骤 4, 设置 CompareValidator 控件 的 相关 属性 ,主要 有 ControlToCompare 属性 (用 
于 进行 比较 的 控件 的 ID); Type 属性 (用 于 比较 的 值 的 数据 类 型 . Integer、String Date、 
Double 和 Currency 共 5 种 ); ValueToCompare: 用 于 进行 比较 的 值 。 

【 例 4-4〗 CompareValidator 实例 。 

第 1 步 , 在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 ,命名 为 Ex4-4. aspx, 设 置 为 起 
始 页 。 
第 2 步 ,在 Ex4-4. aspx 中 添加 如 下 代码 : 
<%@ Page Language = "C 井 ”RutoEventWireup = "true" CodeFile = "Ex4 一 4.aspx.cs" 
Inherits = "Ex4 4" %> 
<! DOCTYPE HTML > 
<HTML xmlns = "http://www.w3.org/1999/xHTML"> 
< head runat = "server"> 
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< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf- 8"/> 
<title></title> 
</head> 
<body> 
< form id= "form 1" runat = "server"> 
<div> 
输入 密码 < asp:TextBox ID = "TextBox1" runat = "server"></asp:TextBox> 
再 输入 一 次 < asp:TextBox ID = "TextBox2" runat = "server"></asp:TextBox> 
</div> 
<asp:CompareValidator ID = "CompareValidator1" runat = "server" ControlToCompare= 
"TextBox1l" ControlToValidate = "TextBox2”ErrorMessage = "确认 密码 必须 与 输入 密码 保持 一 致 !" 
ForeColor = " #FF3300"> 
</asp:CompareValidator > 
</form> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,在 第 1 个 文本 框 中 输入 123 ,在 第 2 个 文本 框 中 输入 2, 得 到 如 图 4-4 
所 示 的 结果 。 





5，CustomValidator 控件 一 一 自 定义 数据 验证 方法 

此 控件 又 称 自 定义 验证 控件 , 它 使 用 自 定义 的 验证 函数 作为 验证 方式 。CustomValidation 
控件 与 其 他 验证 控件 的 最 大 区 别 是 ,该 控件 可 以 添加 客户 端 验证 函数 和 服务 器 端 验证 函数 。 
客户 端 验证 函数 总 是 在 ClientValidatorFunction 属性 中 指定 ,而 服务 器 端 验 证 函数 总 是 通 
过 OnServerValidate 属性 来 设 定 , 并 被 指定 为 ServerValidate 事件 处 理 程序 。 每 个 验证 控 
件 都 会 公开 自己 的 IsValid 属性 ,该 属性 指明 数据 是 否 通过 本 控件 的 验证 。 当 IsValid 属性 
为 True 时 ,表示 数据 已 通过 页 面 上 所 有 验证 控件 的 验证 ,否则 ,不 通过 验证 。 

【语法 】 

<asp: CustomValidator 


ID= "控件 名 称 " 


runat = "server" 

ControlToValidate = "要 检查 的 控件 名 " 

ClientValidationFunction = "客户 端 函 数 " 

Display = "Static|DYynamic|None" 

ErrorMessage = "错误 信息 "ForeColor = "颜色 值 "> 文本 信息 

</asp:RequiredFieldValidator > 

使 用 的 基本 步骤 : 

步骤 1, 在 VS 2013 中 新 建 一 个 网 站 ,并 添加 一 个 Web 窗 体 。 

步骤 2, 从 工具 箱 上 拖 一 个 TextBox 控件 放置 在 Web 窗 体 上 ,让 用 户 输入 数据 。 

步骤 3, 从 工具 箱 上 拖 一 个 CustomValidator 控件 放置 在 Web 窗 体 上 。 

步骤 4, 设 置 CustomValidator 控件 的 相关 属性 ,主要 有 ClientValidationFunction: 客 
户 端 验证 函数 通过 此 属性 指定 ; OnServerValidate: 服务 器 端 验证 函数 通过 此 属性 指定 ,并 
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被 指定 为 ServerValidate 事件 处 理 程序 。 
【 例 4-5】 基于 客户 端的 CustomValidator 验证 实例 。 
第 1 步 , 在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 ,命名 为 Ex4-5. aspx, 设 置 为 起 始 
页 ,添加 如 下 代码 : 


<%@ Page Language = "C#" AutogventWireup= "true" CodeFile = "Ex4 一 5.aspx.cs" 
Inherits = "Ex4 5" %> 
<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
< head runat = "server"> 
< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf ~ 8"/> 
<title></title> 
< script language = "javascript" type = "text/javascript"> 
function CheckDataEvent( source,args) { 
var argument = document. getElementById("TextBox1"); 
if ((argument.value % 2) == 0) 
args. IsValid = true; 
else { 
args. IsValid = false; 
} 
} 
</script > 
</head> 
<body> 
<form id= "form 1" runat = "server"> 
请 输入 一 个 偶数 
<asp:TextBox ID = "TextBox1" runat = "server"></asp:TextBox> 
<asp:CustomValidator ID = "CustomValidator1l" runat = "server" ControlToValidate = "TextBox1l" 
ErrorMessage = "你 输入 的 不 是 一 个 偶数 " ForeColor = " # FF3300" ClientValidationFunction = 
CheckDataEvent"></asp:CustomValidator > 








</form> 
</body> 
</HTML> 
第 2 步 ,运行 程序 ,得 到 如 图 4-5 所 示 的 结果 。 
请 输入 一 个 但 数 |1 你 输入 的 不 是 一 个 人 
图 4-5 运行 结果 


【 例 4-6】 基于 服务 端的 CustomValidator 验证 实例 。 
第 1 步 ,在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 ,命名 为 Ex4-6. aspx, 设 置 为 起 始 
页 ,添加 如 下 代码 : 


<%@ Page Language = "C#" AutogventWireup = "true" CodeFile = "Ex4— 6.aspx.cs" Inherits=" 
Ex4 6" %> 

<!DOCTYPE HTML > 

< HIML xmlns = "http://www. w3. org/1999/xHTML"> 

< head runat = "server"> 

<Meta http - equiv = "Content - Type" content = "text/HIML; charset = utf - 8"/> 
<title></title> 
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</head> 

<body> 

<form id= "form 1" runat = "server"> 
请 输入 一 个 偶数 


<asp:TextBox ID = "TextBox1" runat = "server"></asp:TextBox> 
<asp:CustomValidator ID= "CustomValidatorl" runat = "server" ControlToValidate= 
"TextBoxl" ErrorMessage = "你 输入 的 不 是 一 个 偶数 " ForeColor = "#FF3300" OnServerValidate = 
"CustomValidator1_ServerValidate" ></asp:CustomValidator > 
</form > 
</body> 
</HTML > 


第 2 步 ,在 Ex4-6. aspx. cs 中 添加 如 下 代码 ， 


using System; 
using System. Collections. Generic; 
using System,. Ling; 
using System. Web; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
public partial class Ex4_6: System. Web. UI. Page 
{ 
protected void CustomValidatorl _ ServerValidate (object source, ServerValidateEventArgs 


args) 
{ 
int a = Convert.ToInt16(TextBoxl.Text); 
if ((a % 2) == 0) 
args. IsValid = true; 
else 
args. IsValid = false; 
} 
} 


第 3 步 ,运行 程序 ,得 到 如 图 4-5 所 示 的 结果 。 
6. ValidationSummary 控件 一 一 显示 当前 页 面 其 他 验证 控件 的 结果 





此 控件 又 称 错误 总 结 控件 ,主要 是 搜集 本 页 中 所 有 的 验证 错误 信息 ,并 将 它们 组 织 好 后 
显示 出 来 。 
【语法 】 


< asp:RequiredFieldValidator 

ID= "控件 名 称 " 

runat = "server" 

ShowSummary = "True|False" 

ControlToValidate = "要 检查 的 控件 名 " 

Display = "Static|DYnamic|None" 

DisplayMode = "List|BulletList|SingleParagraph" 
ErrorMessage = "错误 信息 " 

ForeColor = "颜色 值 "> 
</asp:RequiredFieldValidator > 


把 ValidationSummary 控件 拖 放 到 Web 窗 体 上 ,修改 属性 即 可 。 
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4.2 正则 表达 式 


正则 表达 式 就 是 记录 文本 规则 的 代码 。 编 写 处 理 字符 串 的 程序 或 网 页 时 ,经 常会 有 查 
找 符合 某 些 复杂 规则 的 字符 串 的 需要 。 正 则 表达 式 就 是 用 于 描述 这 些 规则 的 工具 。 


4.2.1 常用 的 元 字符 


1. \b 

\b 是 正则 表达 式 规定 的 一 个 特殊 代码 (Metacharacter) ,代表 着 单词 的 开头 或 结尾 ,也 
就 是 单词 的 分 界 处 ,如 \b hi \b, 表 示 单 词 hi。 

2. .与 * 

.是 男 一 个 元 字符 ,匹配 除了 换行 符 以 外 的 任意 字符 ; * 同样 是 元 字符 ,不 过 , 它 代表 的 
不 是 字符 ,也 不 是 位 置 , 而 是 数量 一 一 它 指定 * 前 边 的 内 容 可 以 连续 重复 使 用 任意 次 ,以 使 
整个 表达 式 得 到 匹配 。 如 . * ,表示 任意 数量 的 不 包含 换行 的 字符 ; \bhi\b. * \bLucy\b, 表 
示 以 hi 开头 , 跟 上 任意 个 任意 字符 (换行 符 除 外 ) ,以 Lucy 结束 的 字符 串 。 

3. \d 

\d 是 一 位 0 一 9 的 数字 。 如 0\d\d-\d\d\d\d\d\d\d\d, 表 示 以 0 开头 , 跟 上 两 个 数字 ， 
加 一 个 连 字号 “-”, 最 后 是 8 个 数字 的 中 国电 话 号 码 。 也 可 以 这 样 写 这 个 表达 式 : 0\d{2})- 
\d{8}。 这 里 \d 后面 的 {2}({8)) 的 意思 是 前 面 \d 必须 连续 重复 匹配 2 次 (8 次 ) 。 

4 NssNwi* 

\s 匹配 任意 的 空白 符 ,包括 空格 , 制 表 符 (Tab) ,换行 符 , 中 文 全 角 空格 等 ; \w 匹配 字 
母 .数字 .下 夯 线 .汉字 等 。 如 : 

\baN\wx \b, 表 示 以 字母 a 开头, 跟 上 任意 数量 的 字母 或 数字 的 字符 串 。 

^ 表 示 匹 配 字 符 串 的 开始 , $ 表示 匹配 字符 串 的 结束 。 

5. 字符 转 义 

如 果 匹 配 元 字符 本 身 , 如 .或 者 * ,因为 它们 会 被 解释 成 别 的 意思 ,所 以 没 办 法 指定 它们 。 
需要 使 用 \ 取 消 这 些 字符 的 特殊 意义 ,因此 应 该 使 用 \. 和 \ * 分 别 表示 . 和 x 本身 。 如 : 


unibetter\. com 表示 unibetter. com; 
C:\\Windows 表示 C:\Windows. 


4.2.2 复杂 的 正则 表达 式 


1. 重复 
表示 重复 多 次 可 以 使 用 * ,十 ,?, 见 表 4-3。 
表 4-3 重复 多 次 的 用 法 








限 定 符 说 明 
* 重复 零 次 或 更 多 次 
二 重复 一 次 或 更 多 次 
? 重复 零 次 或 一 次 
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续 表 
限 定 符 说 明 
{n} 重复 n 次 
{n,} 重复 n 次 或 更 多 次 
{n,m) 重复 n 到 m 次 








如 : Windows\d 十 表示 Windows 后 面 跟 一 个 或 更 多 个 数字 。 

表示 QQ 号 为 5 一 12 位 数字 串 ,正则 式 为 ^\d{5,12} $ ,其 中 {5,12}) 是 重复 的 次 数 ,不 能 
少 于 5 次 ,不 能 多 于 12 次 。 

2. 字符 集 和 元 素 

匹配 数字 ,字母 或 数字 ,空白 比较 简单 ,因为 已 经 有 了 对 应 这 些 字符 集合 的 元 字符 。 但 
是 ,如 果 想 匹配 没有 预定 义 元 字符 的 字符 集合 ,在 方 括 号 里 列 出 它们 就 可 以 了 。 如 : 

[aeiou] 表 示 匹 配 任 何 一 个 英文 元 音字 母 。 

[. ?表示 匹配 标点 符号 (. 或? 或 1)。 

[0-9] 表 示 匹 配 数字 ,含义 与 \d 完全 一 致 。 

[a-z0-9A-Z_] 表 示 匹 配 只 考虑 英文 时 \w 的 含义 。 

3. 反 义 

有 时 需要 查找 不 属于 某 个 能 简单 定义 的 字符 类 的 字符 。 例 如 , 想 查找 除了 数字 以 外 ,其 
他 任意 字符 都 行 的 情况 ,这 时 需要 用 到 反 义 。 表 示 反 义 的 代码 见 表 4-4 所 示 。 

表 4-4 表示 反 义 的 代码 




















反 义 代 码 说 有明 

\W 匹配 任意 不 是 字母 .数字 .下面 线 \. 汉 字 的 字符 
多 匹配 任意 不 是 空白 符 的 字符 

\D 匹配 任意 非 数字 的 字符 

\B 匹配 不 是 单词 开头 或 结束 的 位 置 

[*x] 匹配 除了 x 以 外 的 任意 字符 

[aeiou] 匹配 除了 aeiou 这 几 个 字母 以 外 的 任意 字符 





如 : < a[^*>] 十 >, 表 示 匹 配 用 尖 括 号 括 起 来 的 以 a 开头 的 字符 串 。 

4. 分 支 

正则 表达 式 里 的 分 支 条 件 指 的 是 有 几 种 规则 ,如 果 满 足 其 中 任意 一 种 规则 ,都 应 该 当成 
匹配 ,具体 方法 是 用 *| ”把 不 同 的 规则 分 隔 开 ,如 0\d{2}-\d{8}|1oN\d{3)}\d{7} ,表示 匹配 两 
种 以 连 字 号 分 隔 的 电话 号 码 : 一 种 是 三 位 区 号 ,8 位 本 地 号 (如 010-12345678) ;一 种 是 4 位 
区 号 ,7 位 本 地 号 (0376-2233445) 。 

(? ON\d{2)N)? [- ]? \d{8}|10\d{2}[- ]? Nd{8} ,表示 匹配 3 位 区 号 的 电话 号 码 ,其 中 
区 号 可 以 用 小 括号 括 起 来 ,也 可 以 不 用 ,区 号 与 本 地 号 间 可 以 用 连 字 号 或 空格 间隔 ,也 可 以 
没有 间隔 。 

\d{5})-\d{4}|\d{5}) ,表示 匹配 美国 的 邮政 编码 。 美 国 邮政 编码 的 规则 是 5 位 数字 ,或 
者 用 连 字 号 间隔 的 9 位 数字 。 

使 用 分 支 条 件 时 ,要 注意 各 个 条 件 的 顺序 。 如 果 改 成 \d{5} 1\d{5)-\d{4), 那 么 就 只 会 
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匹配 5 位 的 邮编 (以 及 9 位 邮编 的 前 5 位 ) 。 原 因 是 匹配 分 支 条 件 时 ,将 会 从 左 到 右 地 测试 
每 个 条 件 , 如 果 满 足 了 某 个 分 支 , 就 不 会 再 管 其 他 条 件 了 。 

5. 分 组 

可 以 用 小 括号 指定 子 表达 式 ( 也 叫做 分 组 ) ,可 以 指定 这 个 子 表达 式 的 重复 次 数 。 如 ; 
(Cdfl,3 八 .){3}Nd{1,3)} ,表示 是 4 个 0 一 999 的 数字 ,中 间 用 “. ”连接 。 

如 果 使 用 算术 比较 ,或 许 能 简单 地 解决 这 个 问题 ,但 是 ,正则 表达 式 中 并 不 提供 关于 数 
学 的 任何 功能 ,所 以 只 能 使 用 元 长 的 分 组 ,选择 字符 类 来 描述 。 如 :((2[0-4]\d|25[0-5]| 
[ol]? \d\d?)\. ){3}(2[0-4]\dl25[0-5]1[ol1]? \d\d?) ,表示 IPv4 的 地 址 。 第 1 个 分 支 表 示 
200 一 249 ,第 2 分 支 表示 250 一 255 ,第 3 分 支 表示 0 一 199, 第 1 组 表示 0 一 255 的 数 加 上 ”“. ”。 

6. 后 向 引用 

使 用 小 括号 指定 一 个 子 表达 式 后 ,匹配 这 个 子 表达 式 的 文本 (也 就 是 此 分 组 捕获 的 内 
容 ) 可 以 在 表达 式 或 其 他 程序 中 作 进一步 的 处 理 。 默 认 情 况 下 ,每 个 分 组 会 自动 拥有 一 
号 ,规则 是 : 从 左 向 右 , 以 分 组 的 左 括号 为 标志 ,分 组 0 对 应 整个 正则 表达 式 , 第 一 个 出 现 的 
分 组 的 组 号 为 1, 第 二 个 为 2, 以 此 类 推 。 后 向 引用 用 于 重复 搜索 前 面 某 个 分 组 匹配 的 文本 。 
如 : \b(\w 十 )\bNs 十 \1\b, 表 示 匹 配 重复 的 单词 , 像 go go, 或 者 kitty kitty。 这 个 表达 式 首 

先是 一 个 单词 ,这 个 单词 分 组 的 编号 为 1, 跟 上 1 个 或 几 个 空白 符 (\s 十 ) ,最 后 是 分 组 1 中 

捕获 的 内 容 ( 也 就 是 前 面 匹 配 的 那个 单词 ) 。 

7. 贪 畦 与 懒 恰 

当 正 则 表达 式 中 包含 能 接受 重复 的 限定 符 时 ,通常 的 行为 是 (在 使 整个 表达 式 能 得 到 匹 
配 的 前 提 下 ) 匹 配 尽 可 能 多 的 字符 。 这 被 称 为 贪 禁 匹配 。 有 时 更 需要 懒惰 匹配 ,也 就 是 匹配 
尽 可 能 少 的 字符 。 懒 惰 限 定 符 及 含义 见 表 4-5。 

表 4-5 懒惰 限 定 符 及 其 含义 




















懒 情 限 定 符 说 有明 
#9 重复 任意 次 ,但 尽 可 能 少 重复 
+? 重复 1 次 或 更 多 次 ,但 尽 可 能 少 重复 
?7 重复 0 次 或 1 次 ,但 尽 可 能 少 重复 
{n,m}? 重复 n 到 m 次 ,但 尽 可 能 少 重复 
{n,}? 重复 n 次 以 上 ,但 尽 可 能 少 重复 


如 : a. x*b, 表 示 匹 配 最 长 的 以 a 开始 ,以 b 结束 的 字符 串 。 如 果 用 它 来 搜索 aabab, 它 
会 匹配 整个 字符 串 aabab。 

a. * ? b, 表 示 匹 配 最 短 的 ,以 a 开 始 ,以 b 结束 的 字符 串 。 如 果 把 它 应 用 于 aabab , 它 会 
匹配 aab( 第 1 一 3 个 字符 ) 和 ab( 第 4 一 5 个 字符 ) 。 


4.3 正则 表达 式 应 用 


上 述 正则 表达 式 可 以 在 RegularExpressionValidator 控件 中 使 用 ,也 可 以 通过 RegExp 
对 象 或 String 对 象 应 用 。 而 String 和 RegExp 都 定义 了 使 用 正则 表达 式 进行 强大 的 模式 匹 
配 和 文本 检索 与 替换 的 函数 。 
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4.3.1 RegExp 对 象 
【语法 】 
直接 使 用 
/pattern/attributes 
或 用 RegExp 对 象 的 方法 定义 。 
Var pattern = new RegExp(pattern, attributes); 


参数 pattern 是 一 个 字符 串 ,指定 了 正则 表达 式 的 模式 或 其 他 正则 表达 式 。 

参数 attributes 是 一 个 可 选 的 字符 串 ,包含 属性 *g”i” 和 “m”, 分 别 用 于 指定 全 局 匹配 、 
区 分 大 小 写 的 匹配 和 多 行 匹 配 ,含义 见 表 4-6。ECMAScript 标准 化 之 前 ,不 支持 m 属性 。 
如 果 pattern 是 正则 表达 式 ,而 不 是 字符 串 , 则 必须 省 略 该 参数 。 如 : 








var box = /box/; // 直 接 用 两 个 反 斜 杠 
var box = /box/ig; // 在 第 二 个 斜 杠 后 面 加 上 模式 修饰 符 
表 4-6 修饰 符 
修 饰 符 描 述 
i 执行 对 大 小 写 不 敏感 的 匹配 
g 执行 全 局 匹配 (查找 所 有 匹配 ,而 非 在 找到 第 一 个 匹配 后 停止 ) 
m 执行 多 行 匹配 








RegExp 对 象 包含 test() 和 exec() 两 个 方法 ,它们 的 功能 基本 相似 ,用 于 测试 字符 串 
匹配 。 
test() 方 法 在 字符 串 中 查找 是 否 存在 指定 的 正则 表达 式 并 返回 布尔 值 ,如 果 存 在 , 则 返 
回 true, 不 存在 , 则 返回 false。 
exec() 方 法 也 用 于 在 字符 串 中 查找 指定 正则 表达 式 ,如果 exec() 方 法 执行 成 功 , 则 返回 
包含 该 查找 字符 串 的 相关 信息 数组 。 如 果 执 行 失败 , 则 返回 null。 
【 例 4-7】 RegExp 正则 表达 式 的 应 用 。 
第 1 步 ,在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 ,命名 为 Ex4-7. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 
< HTML > 
<head> 
<Meta http - equiv = "Content ~ TYpe"”content = "text/HTML; charset = utf — 8"/> 
<title> RegExp 正则 表达 式 应 用 </title> 
</head> 
<body> 
< script type = "text/javascript" > 
var pattern = new RegExp('box', 'i'); // 创 建 正则 模式 ,不 区 分 大 小 写 
var str = 'This is a Box!'; // 创 建 要 比 对 的 字符 串 
alert(pattern. test(str)); // 通 过 test() 方 法 验证 是 否 匹 配 


/* 使 用 字面 量 方式 的 test 方法 示例 * / 
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var pattern = 


/box/i; // 创 建 正则 模式 ,不 区 分 大 小 写 


Var str = "This is a Box!'; 
alert(pattern. test( str)); 


/* 使 用 一 条 语句 实现 正则 匹配 * / 
alert(/box/i. test( 'This is a Box! ')); // 模 式 和 字符 串 蔡 换 掉 了 两 个 变量 


/* 使 用 exec 返回 匹配 数组 * / 


var pattern = /box/i; 

var str = 'This is a Box!'; 

alert(pattern. exec(str)); // 匹 配 了 返回 数组 ,否则 返回 nul1 
</script > 

</body> 

</HIML> 


第 2 步 ,运行 程序 ,输出 


4.3.2 String 对 象 的 正则 表达 式 方法 


除了 test() 和 exec() 方 法 ,String 对 象 也 提供 了 4 个 使 用 正则 表达 式 的 方法 ,具体 用 法 
和 返回 值 见 表 4-7。 


表 4-7 支持 正则 表达 式 的 String 对 象 的 方法 








方 法 描 述 
search(pattern) 检索 与 正则 表达 式 相 匹配 的 值 ,返回 字符 串 中 pattern 开始 的 位 置 
match( pattern) 找到 一 个 或 多 个 正则 表达 式 的 匹配 ,返回 pattern 中 的 子 串 或 null 





replace( pattern, replacement) 替换 与 正则 表达 式 匹 配 的 子 串 ,用 replacement 替换 pattern 





split(pattern) 





把 字符 串 分 割 为 字符 串 数组 ,返回 字符 串 按 指 定 pattern 拆 分 的 数组 


【 例 4-8〗 String 对 象 的 正则 表达 式 方 法 。 
第 1 步 , 在 ValidWebsites 项 目 中 添加 一 个 Web 窗 体 ,命名 为 Ex4-8. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HTML > 
<head> 


<Meta http~ equiv = "Content ~ Type" content = "text/HTML; charset = utf -8"/> 
<title> String 对 象 的 正则 表达 式 方法 </title> 


</head> 
<body> 
< script type = "text/javascript" > 
/* 使 用 match 方法 获取 匹配 数组 * / 
var pattern = /box/ig; // 全 局 搜索 
Var str = 'This is a Box!,That is a Box too'7 
alert(str. match(pattern)); // 匹 配 到 两 个 Box, Box 


alert(str. match(pattern). length); // 获 取 数 组 的 长 度 ,2 
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/* 使 用 search 查找 匹配 数据 */ 
var pattern = /box/ig; 
Var str = 'This is a Box!,That is a Box too'7 
alert(str. search(pattern)); // 查 找到 返回 位 置 10, 否则 返回 -1 
/* 使 用 replace 替换 匹配 到 的 数据 * / 
var pattern = /box/ig; 
Var str = 'This is a Boxl ,That is a Box too'7 
alert( str. replace(pattern, "Tom') ); // 将 Box 蔡 换 成 了 Tom 
/* 使 用 split 拆 分 字符 串 数 组 * / 
var pattern = / /ig; 
Var str = 'This is a Box! ,That is a Box too'7 
alert(str. split (pattern)); // 将 字符 串 按照 空格 拆 分 成 数组 
</script > 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,输出 结果 


Box, Box 

2 

10 

This is a Tom! ,that is a Tom too 
This, is,a, Box!, That, is,a Box, too 


4.4 常见 的 正则 表达 式 








(1) ^[1 一 9]dx $ // 匹 配 正 整数 

2) *—[1—9]dx '$ // 匹 配 负 整数 

(3) “—? [1 一 9]dx* $ // 匹 配 整数 

(4) ^[1 一 9]dx |0$ // 匹 配 非 负 整数 ( 正 整数 十 0) 

(5) ^ 一 [1 一 9]dx |0$ // 匹 配 非 正 整数 ( 负 整 数 十 0) 

(6) “[1—9Jd*.dx*|0.dx*x[1—9]Jdx*$ // 匹 配 正 浮 点 数 

(7) “一 ([1 一 9]dx* .dx 10.dx[1 一 9]dx )$ // 匹 配 负 浮 点 数 

(8) “一 ? 〈([1 一 9]dx .dx* 10.dx[1 一 9]dx |0?.0 十 10)$ // 匹 配 浮 点 数 

(9) ^[1 一 9]jdx .dx |0.dx[1 一 9]dx |0?.0 十 |10$ /匹配 非 负 浮 点 数 ( 正 浮 点 数 十 0) 


(10)^( 一 ([1 一 9]dx* .dx 10.dx[1 一 9]dx ))10?.0 十 10$ // 匹 配 非 正 浮 点 数 ( 负 浮 
点 数 十 0) 
(11) ^[u4e00 一 u9fa5],{0,)}$ // 匹 配 只 能 输入 汉字 
《12》^*w 十 [一 十 . ]w 十 )》* @w 二 ([ 一 . jw 十 )》*.w+i+([ 一 . ]w+)*$ 
// 验 证 E-mail 地 址 
(13) “http://([w—jJ+.)+[w—J+(/[w—./?%&=]*)? $ 
// 验 证 Internet 的 URL 
(14) 作 b(?:(?:25[0 一 5]|12[0 一 4][o 一 9]1[o1]? [o 一 9][o 一 9]?)N. ){3}(?:25[0 一 5] 
12[0 一 4J[0 一 9J1[01J? [0 一 9][o 一 9]?)Nb/ ,验证 匹配 的 IP 地 址 
(15) 匹配 中 国 大 陆 身份 证 : /L1 一 9]\d{(5}L1 一 9]\d{3}(CCOONd)1(GILo 一 2]))(CCLol1I2] 
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\d)13[0—1]D\d{3}\dlx|X) $/ 


4.5 习 题 


1. 区 分 服务 器 端 数据 验证 和 客户 端 数据 验证 。 

2. 概述 ASP. NET 提供 的 6 种 服务 器 验证 控件 。 

3. 写 出 下 列 正则 表达 式 的 含义 。 

(1) “^[0 一 9] 十 (. [0 一 9]{1,3))? $ 

(2) ^\w 二 ([ 一 十 . Nw 二 +)*@\w+t([—. NN\w+)*\.\w+([—. J\w++)*$ 
(3) “[a—zA—2Z]\w{5,17} $ 

(4) “\d{15}|\d{}18$ 








JavaScript 编程 技术 


5.1 JavaScript 编程 基础 


5.1.1 JavaScript 简介 


1995 年 , Netscape 公司 的 Brendan Eich 在 网 景 导航 者 浏览 器 上 首次 设计 实现 了 
JavaScript。 因 为 Netscape 与 Sun 合作 ,Netscape 管理 层 希 望 它 外 观看 起 来 像 Java, 因 此 取 
名 为 JavaScript。 为 了 取得 技术 优势 ,微软 推出 了 JScript, CEnvi 推出 了 ScriptEase, 与 
JavaScript 同样 可 在 浏览 器 上 运行 。 为 了 统一 规格 ,JavaScript 兼容 于 欧洲 计算 机 制造 联合 
会 (European Computer Manufactures Association ,ECMA) ,因此 也 称 为 ECMAScript。 

JavaScript 是 一 种 戏 入 HTML 文件 中 的 脚本 语言 ,是 基于 对 象 驱动 的 ,能 对 鼠标 单 击 、 
表单 输入 、 页 面 浏览 等 用 户 事件 做 出 反应 并 进行 处 理 。 

JavaScript 是 简化 的 编程 语言 ,不 像 高 级 语言 具有 严格 的 使 用 限制 ,使 用 简洁 灵活 。 
JavaScript 可 直接 使 用 变量 ,不 必 事 先 声 明 ,变量 类 型 规定 也 不 十 分 严格 。 

JavaScript 是 一 种 基于 对 象 (object-based) 的 语言 ,允许 用 户 自 定义 对 象 ,同时 ,浏览 器 
还 提供 大 量 的 内 建 对 象 ,可 以 将 浏览 器 中 不 同 的 元 素 作为 对 象 处 理 , 体 现 了 面向 对 象 编程 的 
思想 。 但 JavaScript 并 不 完全 面向 对 象 ,不 支持 类 和 继承 。 

JavaScript 可 在 大 多 数 浏览 器 上 直接 运行 。 


5.1.2 JavaScript 的 使 用 方法 


1. 直接 在 HTML 中 嵌入 JavaScript 

HTML 文件 中 使 用 < script > 和 </script > 标记 对 加 入 JavaScript 语句 ,位 于 HTML 文 
件 的 任何 位 置 。 最 好 将 所 有 脚本 程序 放 在 Head 标记 内 ,以 确保 容易 维护 。 在 Script 标记 
之 间 加 上 “<! --” 和 *“//-->” 表 示 如 果 浏 览 器 不 支持 JavaScript 语言 ,这 段 代 码 不 执行 。 

【 例 S-1〗 HTML 文件 中 使 用 脚本 语言 。 

第 1 步 ,利用 VS 2013 建立 一 个 空 网 站 项 目 JavaScriptWebsite。 

第 2 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-1. HTML, 设 为 起 始 页 , 添 
加 如 下 代码 : 

< HIML > 

<head> 


<Meta http— equiv = "Content — Type" content = "text/HTML; charset = gb2312"> 
<title > HTML 中 如 何 使 用 script 语言 -- 设 置 收藏 夹 实例 </title> 
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</head> 
< script type = "text/javascript"> 
es 


alert( 'Hello, world'); // 显 示 消 息 对 话 框 
function SayHello( Name) 

{ 

alert( 'Hello' + Name); // 显 示 消息 对 话 框 
} 


</script > 

<body> 

<A HREF = "javascript: SayHello ( ' 张 三 ');"> 你 点 我 呀 </A> 
</body> 

</HTML> 


第 3 步 , 运 行程 序 , 运 行 结果 如 图 5-1 所 示 。 


企 Helloworld 


图 5-1 程序 运行 结果 


代码 可 以 放 在 函数 中 ,也 可 以 不 放 在 函数 中 。 不 放 在 函数 中 的 代码 在 浏览 器 加 载 


HTML 页 面 后 还 没有 呈现 HTML 显示 效果 前 就 执行 一 次 ,以 后 不 再 执行 。 如 果 重 新 加 载 
页 面 , 则 再 执行 一 次 。 而 函数 则 可 根据 用 户 需 要 在 页 面 中 多 次 调用 ,完成 多 次 执行 操作 。 


一 个 HTML 页 面 中 可 有 多 个 < script > 和 </script > 程序 段 ,程序 段 的 前 后 关系 以 及 程 


序 段 与 HTML 标记 的 前 后 关系 应 有 逻辑 关系 。 


脚本 语言 的 设置 也 可 以 用 < script language 一 "javascript"></script >, 但 是 在 HTML 


4.0 版 本 中 ,W3C 建议 制定 脚本 语言 时 用 type 属性 代替 language 属性 。 


2. 单独 的 Js 文件 


将 JavaScript 程序 以 扩展 名 *. js 单独 存放 ,再 在 HTML 网 页 中 使 用 < script src 一 "* .js"> 


嵌入 到 文件 中 ,以 期 实现 代码 共享 。 


【 例 5-2〗 在 HTML 页 面 调用 js 文件 中 的 函数 。 


第 1 步 ,在 JavaScriptWebsite 中 添加 JavaScript 文件 ,命名 为 jsone. js。 


function SayHello(Name) 
{ alert("Hello" + Name); // 显 示 消 息 对 话 框 
} 


第 2 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-2. HTML, 设 为 起 始 页 , 添 


加 如 下 代码 : 


<HIML> 
<head> 


<Meta http - equiv = "Content - Type" content = "text/HTML; charset = gb2312"> 


<title> HTML 中 如 何 使 用 script 语言 </title> 


< script type = "text/javascript" src = "jsone. js"></script> 


</head> 
<body> 
<A HREF = 井 onclick = "SayHello( ' 张 三 ');"> 你 点 我 呀 </A> 
</body> 
</HTML > 
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第 3 步 ,运行 程序 ,出 现 超级 链接 : 你 点 我 呀 , 单 击 后 出 现 





如 图 5-2 所 示 的 对 话 框 。 HelloNk= 
3. 直接 在 HTML 的 标记 添加 JavaScript 脚本 
【 例 5-3】 直接 在 HTML 的 标记 添加 JavaScript 脚本 。 


第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 


5-3. HTML, 设 为 起 始 页 ,添加 如 下 代码 ， i 


<HIML > 

<head > 

<Meta http - equiv = "Content — TYpe"” content = "text/HTML; charset = gb2312"> 
<title> HTML 中 如 何 使 用 script 语言 </title> 

</head> 

<body> 

<A HREF = # onclick = "javascript:alert('Hello, 张 三 ');"> 你 点 我 呀 </A> 
</body> 

</HTML > 


第 2 步 , 运 行程 序 , 结 果 与 例 5-2 相同 。 
5.1.3 语法 规则 


1. 区 分 大 小 写 

变量 .函数 名 和 操作 符 都 区 分 大 小 写 。 例 如 ,text 和 Text 表示 两 种 不 同 的 变量 。 

2. 标识 符 

所 谓 标识 符 , 是 指 变量 .函数 .属性 的 名 字 ,或 者 函数 的 参数 。 标 识 符 可 以 是 下 列 格式 规 
则 组 合 起 来 的 一 个 或 多 个 字符 : 第 一 个 字符 必须 是 一 个 字母 .下 画 线 (_) 或 美元 符号 ($ ); 
其 他 字符 可 以 是 字母 .下面 线 、 美 元 符号 或 数字 ; 不 能 把 关键 字 、 保 留 字 true ,false 和 null 
作为 标识 符 。 

3. 直接 量 (字面 量 literal) 

直接 量 (字面 量 ) 就 是 程序 中 直接 显示 出 来 的 数据 值 , 即 常量 。 

100 // 数 字 字 面 量 

' 李 炎 恢 ' // 字 符 串 字面 量 

false // 布 尔 字 面 量 


/js/gi /正则 表达 式 字面 量 
null // 对 象 字面 量 


4. 关键 字 

一 组 具有 特定 用 途 的 关键 字 ,一 般 用 于 控制 语句 的 开始 或 结束 ,或 者 用 于 执行 特定 的 操 
作 等 。 关 键 字 也 是 语言 保留 的 ,不 能 用 作 标 识 符 。JavaScript 的 全 部 关键 字 包 括 : break， 
else,new, var, case, finally, return, void, catch, for, switch, while, continue, function , this, 
with, default ,if,throw ,delete,in,try,do,instanceof 和 typeof 。 

5. 保留 字 

JavaScript 还 有 一 组 不 能 用 于 标识 符 的 保留 字 , 尽 管 这 些 保 留 字 目 前 在 JavaScript 中 还 
没有 特定 的 用 途 ,但 它们 很 有 可 能 在 将 来 被 用 作 关 键 字 。 
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abstract,enum,int, short, boolean, export, interface, static, byte, extends, long, super, 
char, final, native, synchronized, class, float, package, throws, Const, goto, private, 
transient, debugger,implements,protected, volatile, double.import,public。 

6. 变量 

JavaScript 的 变量 是 松散 型 的 。 所 谓 松散 型 ,就 是 用 来 保存 任何 类 型 的 数据 。 定 义 变 
量 时 要 使 用 var 操作 符 (var 是 关键 ) ,后 面 跟 一 个 变量 名 (变量 名 是 标识 符 ) 。 

var count; // 单 个 变量 声明 

var count, amount, level; // 多 个 变量 声明 

var count = 0,amount = 100; ”// 变 量 声明 和 初始 化 

如 果 在 var 语句 中 没有 初始 化 变量 ,变量 自动 取 JavaScript 值 undefined。 

变量 的 名 称 可 以 是 任意 长 度 的 。 创 建 合 法 的 变量 名 称 应 遵循 如 下 规则 : 

第 一 个 字符 必须 是 一 个 ASCII 码 ( 大 小 写 均 可 ) ,或 一 条 下 画 线 (_) 。 注 意 : 第 一 个 字符 
不 能 是 数字 ; 后 续 的 字符 必须 是 字母 .数字 或 下 夯 线 ; 且 变 量 名 称 一 定 不 能 是 保留 字 和 关 
键 字 。 

7. 注释 

使 用 C 风格 的 注释 ,包括 单行 注释 和 块 级 注释 。 

// 单行 注释 

/x* 

* 这 是 一 个 多 行 

* 注释 

*/ 


5.1.4 运算 符 和 表达 式 


1. 数据 类 型 

JavaScript 中 有 5 种 简单 的 数据 类 型 : Undefined、 Null、 Boolean .Number 和 String。 
还 有 一 种 复杂 的 数据 类 型 一 一 Object。ECMAScript 不 支持 任何 创建 自 定义 类 型 的 机 制 ， 
所 有 值 都 为 以 上 6 种 数据 类 型 之 一 。 

Undefined 类 型 只 有 一 个 值 , 即 特殊 的 undefined。 使 用 var 声明 变量 ,但 没有 对 其 初始 
化 时 ,这 个 变量 的 值 就 是 undefined。 未 初始 化 的 变量 与 根本 不 存在 的 变量 (未 声明 的 变量 ) 
也 是 不 一 样 的 。 

Var box; 

alert(age) ; // 错 误 信息 ,age is not defined 


Null 类 型 是 一 个 只 有 一 个 值 的 数据 类 型 , 即 特殊 的 值 null。 它 表示 一 个 空 对 象 引用 
(指针 ) ,而 typeof 操作 符 检测 null 会 返回 object。 

JavaScript 中 null 和 undefined 的 主要 区 别 , 即 null 的 操作 如 同 数字 0, 而 undefined 的 
操作 如 同 特殊 值 NaN( 不 是 一 个 数字 )。 但 对 null 值 和 undefined 值 作 比较 总 是 相等 的 , 因 
为 undefined 派生 自 null,JavaScript 规定 对 它们 的 相等 性 测试 返回 true, 如 alert(undefined 
一 一 null); // 返 回 True 
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【 例 5-4】 JavaScript 中 的 null 计算 。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-4. HTML , 设 为 起 始 页 , 添 
加 如 下 代码 ; 


< script language = "javascript"> 
Var bestAge = null; 
Var muchToo0ld= 3 * bestAge; 
//alert 实现 了 在 浏览 器 中 弹出 消息 对 话 框 的 功能 
alert (bestAge); 
alert(muchToo0ld) ; 
</script> 
第 2 步 ,运行 程序 ,输出 结果 : 
消息 框 显示 bestAge 为 null。 
消息 框 显示 muchTooOld 的 值 为 0。 
【 例 5-5】 JavaScript 中 的 undefined 计算 。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-5. HTML, 设 为 起 始 页 , 添 
加 如 下 代码 : 


< script language = "javascript"> 

Var currentCount; 

var finalCount =1 * currentCount; 

alert(currentCount); 

alert(finalCount); 

</script > 

第 2 步 ,运行 程序 ,输出 结果 : 

消息 框 显示 currentCount 为 undefined。 

消息 框 显示 finalCount 的 值 为 NaNCNot a Number) 。 

Boolean 类 型 有 两 个 值 ( 字 面 量 ) : true 和 false。 而 True 不 一 定 等 于 1,False 不 一 定 等 
于 0。JavaScript 区 分 大 小 写 ,True 和 False 或 者 其 他 都 不 是 Boolean 类 型 的 值 。 

在 JavaScript 中 ,整数 和 浮 点 值 没 有 差别 ; JavaScript 数值 可 以 是 其 中 任意 一 种 
(JavaScript 内 部 将 所 有 的 数值 表示 为 浮 点 值 ) 。 

整 型 值 可 以 是 正 整 数 . 负 整数 和 0, 可 以 用 十 进 制 \. 八 进 制 和 十 六 进 制 来 表示 。 在 
JavaScript 中 ,数字 大 多 用 十 进 制 表示 。 浮 点 值 为 带 小 数 部 分 的 数 ,也 可 以 用 科学 计数 法 来 
表示 。 

八进制 数值 字面 量 以 8 为 基数 ,前 导 必 须 是 0。 

var box = 070; ”// 八 进 制 ,56 

十 六 进 制 字面 量 前 面 两 位 必须 是 0x, 后 面 是 0~9 及 A~F。 

var box = 0xA; ”// 十 六 进 制 ,10 

浮 点 类 型 ,就 是 该 数值 中 必须 包含 一 个 小 数 点 ,并 且 小 数 点 后 面 必须 至 少 有 一 位 数字 。 


Var box = 3.8; 
Var box = 0.8; 
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字符 串 数值 类 型 用 来 表示 JavaScript 中 的 文本 。String 类 型 用 于 表示 由 于 零 或 多 个 
16 位 Unicode 字符 组 成 的 字符 序列 , 即 字符 串 。 脚 本 中 的 字符 串 文 本 放 在 一 对 匹配 的 单 引 
号 或 双 引 号 中 。 字 符 串 中 可 以 包含 双 引 号 ,该 双 引 号 两 边 需 加 单 引号 ,如 '4'"5'。 字 符 串 中 
也 可 以 包含 单 引 号 ,该 单 引 号 两 边 需 加 双 引 号 ,如 “1'5'”。 

JavaScript 中 的 字符 串 是 不 可 变 的 ,也 就 是 说 ,字符 串 一 旦 创建 ,它们 的 值 就 不 能 改变 。 
要 改变 某 个 变量 保存 的 字符 串 ,首先 要 销毁 原来 的 字符 串 ,然后 再 用 另 一 个 包含 新 值 的 字符 


串 填 充 该 变量 。 
JavaScript 中 的 对 象 其 实 就 是 一 组 数据 和 功能 的 集合 。 可 以 通过 执行 new 对 象 类 型 的 
名 称 来 创建 对 象 。 


2. 数据 类 型 之 间 的 转换 
不 同 数据 类 型 的 转换 有 隐 式 转换 和 显示 转换 。 在 JavaScript 中 ,可 以 对 不 同类 型 的 值 
执行 运算 ,不 必 担 心 JavaScript 解释 器 产生 异常 。JavaScript 解释 器 自动 将 数据 类 型 强制 转 
换 为 另 一 种 类 型 ,然后 执行 运算 。 数 据 类 型 转换 过 程 见 表 5-1。 
表 5-1 数据 类 型 转换 过 程 

















运 算 结 果 例 子 
数值 与 字符 串 相 加 将 数值 强制 转换 为 字符 串 55 十 "45"//"5545" 
布尔 值 与 字符 串 相 加 “| 将 布尔 值 强制 转换 为 字符 串 True 十 "45"”//"True45" 
数值 与 布尔 值 相 加 将 布尔 值 强制 转换 为 数值 。True 二 1; False=0 55 * True//55 


字符 串 数字、 对 象 和 undefined 类 型 都 可 以 转换 为 Boolean 类 型 ,转换 规则 见 表 5-2。 
表 5-2 其 他 类 型 转换 为 Boolean 类 型 




















数据 类 型 True False 
String 任何 非 空 字符 串 空 字 符 串 
Number 非 零 的 数字 值 0 和 NaN 
Object 任何 对 象 null 
undefined undefined 


有 3 个 函数 可 以 把 非 数值 转换 为 数值 : Number() .parselInt() 和 parseFloat()。 
Number() 函数 是 转型 函数 ,可 以 用 于 任何 数据 类 型 ,另外 两 个 函数 则 专门 用 于 把 字符 
串 转换 成 数值 。 
【 例 5-6】 数据 类 型 。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-6. HTML , 设 为 起 始 页 , 添 
加 如 下 代码 : 
< script type = "text/javascript"> 
alert(Number(true)); 
alert(Number(25)); 


alert(Number(nu11)); 
alert(Number(undefined)); 


alert(parseInt("456Lee")); 
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alert(parseInt("Lee456Lee")); 
alert(parseInt("12Lee56Lee" ) ) ; 
alert(parseInt("56.12")); 
alert(parseInt("")); 

</script > 


第 2 步 ,运行 程序 ,输出 结果 : 


1 //Boolean 类 型 的 True 和 False 分 别 转 换 成 1 和 0 

25 // 数 值 型 直接 返回 

0 ”// 空 对 象 返回 0 

NaN //undefined 返回 NaN 

456 ”// 会 返回 整数 部 分 

NaN // 如 果 第 一 个 不 是 数值 ,就 返回 NaN 

12 // 从 第 一 数值 开始 取 , 到 最 后 一 个 连续 数值 结束 

56 。 // 小 数 点 不 是 数值 ,会 被 去 掉 

NaN // 空 返回 NaN 

toString() 方 法 可 以 把 值 转换 成 字符 串 。 

toString() 方 法 一 般 不 需要 传递 参数 ,但 在 数值 转换 成 字符 串 的 时 候 ,可 以 传递 进 制 
参数 。 

【 例 5-7】 toString 语句 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-7. HTML, 设 为 起 始 页 , 添 
加 如 下 代码 : 

< script language = "javascript"> 

var box = 10; 

alert(box. toString());  //10, 默认 输出 

alert(box.toString(2)); //1010, 二进制 输出 

alert(box. toString(8)); //12, 八进制 输出 

alert(box. toString(10)); //10, 十 进 制 输出 


alert(box. toString(16)); //a, 十 六 进 制 输出 
</script > 


第 2 步 , 运 行程 序 ,输出 结果 : 


3. 运算 符 
JavaScript 运算 符 包 括 算术 、 逻 辑 、 位 、 赋 值 以 及 其 他 运算 符 。 运 算 符 描述 见 表 5-3。 
表 5-3 运算 符 描述 











算术 运算 符 逻辑 运算 符 位 运算 符 赋值 运算 符 其 他 运算 符 

描述 | 符号 描述 符号 描述 符号 | 描述 | 符号 | 描述 符号 
负 值 一 逻辑 非 ! 按 位 取 反 | 一 赋值 等 删除 Delete 
递增 十 十 小 于 < 按 位 左 移 | << | 运算 赋值 | op= | 判断 类 型 | typeof 
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续 表 
算术 运算 符 逻辑 运算 符 位 运算 符 赋值 运算 符 其 他 运算 符 
描述 符号 描述 符号 描述 号 | 描述 符号 | 描述 符号 
递减 二 和 天 于 > 按 位 右 移 | 之 空 void 
乘法 关 小 于 等 于 | <= | 无 符号 右 移 | >>> 实例 | instance of 
除法 此 大 于 等 于 | > 一 按 位 与 & 新 建 new 
取 模 运算 | % | 等 于 ( 恒 等 ) | 二 二 | 按 位 异 或 轴 属于 in 
加 法 十 不 等 于 站 和 按 位 或 | 
减法 一 逻辑 与 && 
逻辑 或 
条 件 运算 符 | ? 
逗号 
严格 相等 “| 三 三 三 
非 严格 相等 |! 一 一 





























相等 ( 恒 等 )“ 二 = 二 ”与 严格 相等 “二 二 二 ”的 区 别 在 于 , 恒 等 运 算 符 在 比较 前 会 强制 转换 
不 同类 型 的 值 。 例 如 ,“1” 二 二 1, 恒 等 对 字符 串 “1” 与 数值 1 的 比较 结果 为 True。 而 严格 相 
等 不 强制 转换 不 同类 型 的 值 ,因此 它 认为 字符 串 *1” 和 数值 1 不 相同 。 

字符 串 数值 和 布尔 值 是 按 值 比较 的 。 如 果 它 们 的 值 相同 , 则 比较 结果 为 相等 。 对 象 (包括 
Array、Function、String、Number、Boolean、Error、Date 以 及 RegExp 对 象 ) 按 引用 比较 。 即 使 这 
些 类 型 的 两 个 变量 具有 相同 的 值 , 也 只 有 在 它们 正好 为 同一 对 象 时 ,比较 结果 才 为 True 。 

【 例 5-8】 比较 运算 符 示例 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-8. HTML , 设 为 起 始 页 , 添 
加 如 下 代码 : 

< script language = "javascript"> 


// 具有 相同 值 的 两 个 基本 字符 串 

var stringl = "Hello", string2 = "Hello"; 

// 具有 相同 值 的 两 个 String 对 象 

var String0bject1 = new String(string1),StringObject2 = new String(string2); 
var myBool = (stringl == string2); 

alert(myBool); // 消息 框 显示 比较 结果 为 True 

var myBool = (StringObjectl == StringObject2); 
alert(myBool); // 消息 框 显示 比较 结果 为 False 

// 要 比较 String 对 象 的 值 ,用 toString() 或 者 valve0f( ) 方法 
var myBool = (StringObject1.valueOf() == StringObject2); 
alert(myBool); // 消息 框 显示 比较 结果 为 True 


</script > 


第 2 步 , 运 行程 序 ,输出 结果 : 


4. 表达 式 
JavaScript 的 表达 式 中 由 常量 .变量 .运算 符 和 表达 式 组 成 ,有 3 类 表达 式 : 
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算式 表达 式 。 值 为 一 个 数值 型 值 ,例如 : 5 十 a 一 x。 
字符 串 表达 式 。 值 为 一 个 字符 串 ,例如 :“ 字 符 串 1” 十 str。 
布尔 表达 式 。 值 为 一 个 布尔 值 ,例如 : (x 一 一 了)&&Cy> 一 5)。 


5.1.5 函数 


函数 为 程序 设计 人 员 提 供 了 显示 模块 化 的 工具 。 通 常 ,根据 所 要 完成 的 功能 ,将 程序 划 
分 为 一 些 相对 独立 的 部 分 ,每 一 部 分 编写 一 个 函数 ,从 而 使 各 个 部 分 充分 独立 ,任务 单一 , 结 
构 清 晰 。 函 数 包括 内 管 函 数 和 自 定义 函数 

1. 内 置 函数 

JavaScript 语言 包含 很 多 内 和 置 函 数 , 可 以 分 为 关于 数值 布尔 值 . 字 符 串 ,HTML 字符 
串 格式 化 数组 .日 期 和 时 间 、 数 学 和 正则 表达 式 几 类 函数 。 

constructor() ,返回 创建 该 对 象 实例 的 函数 ,默认 是 数值 对 象 。 

toExponential() ,强制 将 数值 以 指数 形式 显示 。 

toFixed() ,把 Number 四 舍 五 人 为 指定 小 数位 数 的 数字 。 

toLocaleString() ,以 字符 串 的 形式 返回 当前 对 象 的 值 。 该 字符 串 适用 于 宿主 环境 的 当 
前 区 域 设 置 。 

toPrecision(), 显 式 地 定义 一 个 数 有 多 少 位 数 (包括 小 数 点 的 左边 和 右边 位 数 ) 。 

toString() ,返回 该 数值 的 字符 串 格式 。 

valueOf() ,返回 数值 。 

toSource() ,返回 一 个 包含 布尔 对 象 的 源 字符 串 ; 可 以 使 用 这 个 字符 串 创 建 一 个 等 价 的 
对 象 。 

toString() ,按照 布尔 结果 返回 True 或 Fales。 

valueOf() ,返回 布尔 对 象 的 原始 值 。 

charAt() ,返回 指定 位 置 的 字符 。 

charCodeAt() ,返回 指定 位 置 字符 的 数值 。 

concat() ,返回 布尔 对 象 的 原始 值 。 

indexOf() ,返回 匹配 子 字符 串 第 一 次 出 现 的 位 置 ,如 果 不 存 在 ,就 返回 一 1。 

lastIndexOf() ,返回 匹配 子 字符 串 最 后 一 次 出 现 的 位 置 ,如 果 不 存在 ,就 返回 一 1。 

localeCompare() ,比较 两 个 字符 串 ,并 返回 以 数字 形式 表示 的 比较 结果 。 

length() ,返回 字符 串 的 长 度 。 

match() ,用 于 匹配 正则 表达 式 。 

replace() ,通过 正则 表达 式 找 到 子 串 位 置 ,并 替换 为 新 指定 的 字符 串 。 

search() ,执行 一 个 正则 表达 式 的 搜索 。 

slice() ,提取 并 返回 一 个 子 串 。 

split() ,将 字符 串 分 割 成 多 个 子 串 ,并 存储 进 字符 串 数组 。 

substr() ,返回 字符 串 中 指定 位 置 .指定 长 度 的 子 串 。 

toLocaleLowerCase() ,大 写字 符 转 为 小 写 , 同 时 尊重 当前 语言 

toLocaleUpperCase() ,小 写字 符 转 为 大 写 , 同 时 尊重 当前 语言 

toLowerCase() ,大 写字 符 转 为 小 写 。 
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toString() ,返回 表示 该 对 象 的 一 个 字符 串 。 

toUpperCase() ,小 写字 符 转 为 大 写 。 

valueOf() ,返回 指定 对 象 的 原始 数值 。 

anchor() ,创建 一 个 HTML 锚 作 为 一 个 超 文本 的 目标 。 

big() ,创建 一 个 以 “大 ”字体 表示 的 字符 串 , 好 比 置 于 标签 中 一 样 。 

blink() ,创建 一 个 闪烁 的 字符 串 ,好比 置 于 标签 中 一 样 。 

bold() ,创建 一 个 粗 体 显示 的 字符 串 ,好 比 置 于 标签 中 一 样 。 

fixed() ,创建 一 个 打字 机 字体 显示 的 字符 串 , 好 比 置 于 标签 中 一 样 。 

fontcolor() ,创建 一 个 特定 字体 颜色 显示 的 字符 串 , 好 比 置 于 标签 中 一 样 。 

fontsize() ,创建 一 个 特定 字体 大 小 显示 的 字符 串 ,好 比 置 于 标签 中 一 样 。 

italics() ,创建 一 个 斜体 显示 的 字符 串 , 好 比 置 于 标签 中 一 样 。 

link() ,创建 HTML 超级 链接 。 

small() ,创建 一 个 小 字体 显示 的 字符 串 ,好 比 置 于 标签 中 一 样 。 

strike() ,创建 一 个 加 了 删除 线 显示 的 字符 串 , 好 比 置 于 标签 中 一 样 。 

sub() ,以 下 标的 方式 显示 ,好 比 置 于 标签 中 一 样 。 

sup(), 以 上 标的 方式 显示 ,好 比 置 于 标签 中 一 样 。 

concat() ,返回 两 个 数据 经 过 连接 后 的 数组 。 

every() ,如 果 数 组 内 的 元 素 均 满足 某 测试 函数 ,那么 就 返回 True。 

filter() ,在 数组 中 通过 过 滤 部 分 元 素 组 成 一 个 新 的 数组 。 

forEach() ,调用 一 个 函数 来 处 理 数组 中 的 每 个 元 素 。 

indexOf() ,返回 与 指定 元 素 相 匹 配 的 第 一 个 位 置 , 如 果 不 存在 ,就 返回 一 1 。 

join() ,连接 数组 中 所 有 的 元 素 ,返回 一 个 字符 串 。 

lastIndexOf() ,返回 与 指定 元 素 相 匹配 的 最 后 一 个 位 置 , 如 果 不 存在 ,就 返回 一 1。 

map() ,调用 一 个 函数 处 理 数 组 中 的 每 一 个 元 素 . 将 生成 的 结果 组 成 一 个 新 的 数组 ,并 
返回 。 

pop() ,返回 数组 中 的 最 后 一 个 元 素 , 并 删除 。 

push() ,在 数组 的 最 后 增加 一 个 元 素 , 并 返回 新 数组 的 长 度 。 

reduce() ,对 数组 中 的 所 有 元 素 ( 从 左 到 右 ) 调 用 指定 的 回调 函数 。 该 回调 函数 的 返回 
值 为 累积 结果 ,并 且 此 返回 值 在 下 一 次 调用 该 回调 函数 时 作为 参数 提供 。 

reduceRight() ,对 数组 中 的 所 有 元 素 ( 从 右 到 左 ) 调 用 指定 的 回调 函数 。 该 回调 函数 的 
返回 值 为 累积 结果 ,并 且 此 返回 值 在 下 一 次 调用 该 回调 函数 时 作为 参数 提供 。 

reverse() , 反 转 数组 元 素 的 顺序 一 一 第 一 个 成 为 最 后 一 个 ,最 后 一 个 成 为 第 一 个 。 

shift() ,删除 数组 的 第 一 个 元 素 并 返回 。 

slice() ,提取 一 段 数组 并 返回 一 个 新 的 数组 。 

some() ,如 果 存 在 一 个 元 素 满足 所 提供 的 测试 函数 ,就 返回 True。 

toSource() ,代表 一 个 对 象 的 源 代码 。 

sort() ,对 数组 中 的 元 素 排 序 。 

splice() ,增删 数组 中 的 元 素 。 

toString() ,返回 一 个 表示 数组 及 其 元 素 的 字符 串 。 
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unshift() ,在 数组 的 首部 添加 新 的 元 素 ,并且 返回 新 数组 的 长 度 。 
Date() ,返回 今天 的 日 期 及 时 间 。 

getDate() ,按照 本 地 模式 返回 指定 日 期 是 哪 一 日 。 

getDay() ,按照 本 地 模式 返回 指定 日 期 是 周 几 。 
getFullYear() ,按照 本 地 模式 返回 指定 日 期 是 哪 一 年 。 
getMilliseconds() ,按照 本 地 模式 返回 指定 日 期 的 毫秒 值 。 
getMinutes() ,按照 本 地 模式 返回 指定 日 期 是 几 分 。 
getMonth() ,按照 本 地 模式 返回 指定 日 期 的 月 份 。 

getSeconds() ,按照 本 地 模式 返回 指定 日 期 是 几 秒 。 
getTime() ,按照 本 地 模式 返回 当前 的 格林 威 治 时 间 。 
getTimezoneOffset() ,以 分 钟 为 单位 返回 时 间 偏 差 。 
getUTCDate() ,按照 世界 统一 时 间 返 回 指定 日 期 是 几 号 。 
getUTCDay() ,按照 世界 统一 时 间 返 回 指定 日 期 是 周 几 。 
getUTCFullYear() ,按照 世界 统一 时 间 返 回 指定 日 的 年 份 。 
getUTCHours() ,按照 世界 统一 时 间 返 回 指 定 日 期 是 几时 。 
getUTCMilliseconds() ,按照 世界 统一 时 间 返 回 指定 日 期 的 毫秒 数 。 
getUTCMinutes() ,按照 世界 统一 时 间 返 回 指定 日 期 的 分 钟 数 。 
getUTCMonth() ,按照 世界 统一 时 间 返 回 指定 日 期 的 月 份 。 
getUTCSeconds() ,按照 世界 统一 时 间 返 回 指定 日 期 的 秒 数 。 
setDate() ,按照 本 地 模式 设置 日 期 。 
setFullYear() ,按照 本 地 模式 设置 年 份 。 
setHours() ,按照 本 地 模式 设置 小 时 。 

setMilliseconds() ,按照 本 地 模式 设置 毫秒 数 。 
setMinutes() ,按照 本 地 模式 设置 分 钟 数 。 
setMonth() ,按照 本 地 模式 设置 月 份 。 
setSeconds() ,按照 本 地 模式 设置 秒 数 。 

setTime() ,按照 格林 尼 治 格式 设置 毫秒 数 。 
setUTCDate() ,按照 世界 统一 时 间 设 置 日 期 。 
setUTCFullYear() ,按照 世界 统一 时 间 设 置 年 份 。 
setUTCHours() ,按照 世界 统一 时 间 设 置 小 时 数 。 
setUTCMilliseconds() ,按照 世界 统一 时 间 设 置 毫秒 数 。 
setUTCMinutes() ,按照 世界 统一 时 间 设 置 分 钟 数 。 
setUTCMonth() ,按照 世界 统一 时 间 设 置 月 份 。 
setUTCSeconds() ,按照 世界 统一 时 间 设 置 秒 数 。 

toDateString() ,返回 日 期 的 字符 串 。 

toLocaleDateString() ,按照 本 地 模式 ,返回 日 期 的 字符 串 。 
toLocaleFormat() ,使 用 格式 字符 串 ,将 日 期 转换 为 一 个 字符 串 。 
toLocaleString() ,使 用 当前 语言 环境 的 约定 将 日 期 转换 为 一 个 字符 串 。 
toLocaleTimeString() ,返回 日 期 的 “时 间 ” 部 分 作为 一 个 字符 串 ,使 用 当前 语言 环境 的 
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约定 。 

toSource() ,返回 一 个 字符 串 代表 一 个 等 价 的 日 期 对 象 的 来 源 ,可 以 使 用 这 个 值 来 创建 
一 个 新 的 对 象 。 

toString() ,返回 一 个 字符 串 代 表 指 定 的 日 期 对 象 。 

toTimeString() ,返回 日 期 的 时间? 部 分 以 字符 串 形式 。 

toUTCString() ,使 用 通用 时 间 约 定 , 将 日 期 转换 为 一 个 字符 串 。 

valueOf() ,返回 日 期 对 象 的 原始 值 。 

Date. parse( ) ,解析 并 返回 日 期 和 时 间 的 字符 串 表示 的 内 部 毫秒 表示 日 期 。 

Date. UTC( ) ,返回 指定 的 毫秒 表示 UTC 日 期 和 时 间 。 

abs() ,返回 数值 的 绝对 值 。 

acos() ,返回 一 个 数值 的 arccos 值 。 

asin() ,返回 一 个 数值 的 arcsin 值 。 

atan() ,返回 一 个 数值 的 arctan 值 。 

ceil() ,返回 大 于 或 等 于 整数 最 小 的 一 个 数字 。 

cos() ,返回 一 个 数值 的 cos 值 。 

exp() ,返回 指数 。 

floor() ,返回 小 于 等 于 一 个 数 的 最 大 数 。 

log() ,返回 一 个 数值 以 。 为 底 的 对 数 。 

max() ,返回 最 大 值 。 

min() ,返回 最 小 值 。 

pow() ,返回 以 e 为 底 的 寡 。 

random() ,返回 0 一 1 的 一 个 伪 随 机 数 。 

round() ,返回 四 舍 五 人 后 的 值 。 

sin() ,返回 sin 值 。 

sqrt() ,返回 一 个 整数 的 平方 根 。 

tan() ,返回 一 个 数值 的 tan 值 。 

toSource() ,返回 字符 串 "Manth"。 

exec() ,执行 一 个 字符 串 的 搜索 匹配 。 

test() ,测试 匹配 的 字符 串 参数 。 

toSource() ,返回 一 个 对 象 文字 代表 指定 的 对 象 ;可 以 使 用 这 个 值 来 创建 一 个 新 的 
对 象 。 

toString() ,返回 一 个 字符 串 代 表 指 定 的 对 象 。 

2. 自 定义 函数 

自 定义 函数 可 以 封装 任意 多 条 语句 ,而 且 可 以 在 任何 地 方 、 任 何 时 候 调 用 执行 。 
JavaScript 中 的 函数 使 用 function 关键 字 来 声明 ,后跟 一 组 参数 以 及 函数 体 。 

【 话 法 】 

function 函数 名 (形式 参数 表 ){ 


// 函 数 体 
} 
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函数 调用 语法 格式 如 下 : 
函数 名 ( 实 参 表 ) ; 


当 函 数 没有 返回 值 时 ,可 以 不 使 用 return 语句 , 若 使 用 return 语句 ,也 只 能 使 用 不 带 参 
数 的 形式 ; 当 函 数 有 返回 值 时 ,使 用 return 语句 返回 函数 值 ,格式 为 : 


return 表达 式 
或 
return( 表 达 式 ) 


【 例 5-9】 函数 示例 。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-9. HTML, 设 为 起 始 页 , 添 
加 如 下 代码 : 


<HITML > 

<Meta = charset = "utf -8" /> 
<head> 

< title > 函数 示例 </title> 
</head> 


< script language = "JavaScript"> 

function factor(num) 

{ var i,fact=1; 
for (i=1;i<num+1;it++) fact = ix*x fact; 
return fact; 

1 

</script > 

<body> 

< script language = "JavaScript"> 

// 调 用 factor 函数 

alert("4 的 阶乘 ="+ factor(4)); 

</script > 

</body > 

</HTML > 


第 2 步 ,运行 程序 ,输出 结果 
4 的 阶乘 = 24 


5.1.6 流程 控制 


1. 证 条 件 语句 

让 语句 有 3 种 类 型 : 单 分 支 、 双 分 支 和 多 分 支 。 
【语法 】 

单 分 支 : 

if( 条 件 ) 


{ 语句 块 ; 
} 
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双 分 支 : 


证 (条 件 ){ 
执行 语句 1 
} 


else{ 
执行 语句 2 
} 


多 分 支 : 


if( 条 件 1) 执行 语句 1; 
else if( 条 件 2) 执行 语句 2; 
else if( 条 件 3) 执行 语句 3; 


else 执行 语句 ; 


在 嵌 套 语句 中 ,每 一 层 的 条 件 表达 式 都 会 被 计算 , 若 为 真 , 则 执行 其 相应 的 语句 ,否则 执 
行 else 后 的 语句 。 在 嵌 套 语句 中 ,else 与 距离 最 近 的 主语 句 配对 ,否则 会 产生 歧义 。 
多 分 支 的 另外 一 种 形式 : 


switch (expression) 

case value: statement; 
break; 

case value: statement; 
break; 

case value: statement; 
break; 

case value: statement; 
break; 

case value: statement; 
break; 

default: statement; 


switch 语句 是 多 重 条 件 判 断 , 用 于 多 个 值 相 等 的 比较 。 关 键 字 break 会 使 代码 跳出 
switch 语句 。 如 果 没 有 关键 字 break ,代码 执行 就 会 继续 进入 下 一 个 case, 关 键 字 default 说 
明了 表达 式 的 结果 不 等 于 任何 一 种 情况 时 的 操作 。 

【 例 5-10】 条 件 语句 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-10. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML > 
<Meta = charset = "utf-8" /> 
<head > 
<title> 条 件 语句 </title> 
</head> 
< Script language = "JavaScript"> 
varb = 100; 
if (b> 50) 
alert('b 大 于 50'); // 判断 后 执行 一 条 语句 


122 ， web 系统 与 技术 





var box = 100; 
if (box < 50) { 
alert('box 大 于 50'); 
} 
alert( ' 不 管 怎样 ,我 都 能 被 执行 到 ! '); // 判断 后 执行 多 条 语句 的 程序 块 


var box = 1; 
switch (box) { // 用 于 判断 box 相等 的 多 个 值 
case 1: 


alert('one') 
break; //break; 用 于 防止 语句 的 穿 透 
case 2: 
alert( 'two'); 
break; 
case 3: 
alert( 'three'); 
break; 
default: // 相 当 于 if 语句 里 的 else, 否则 的 意思 


alert( 'error'); 
} 

</script > 

</body> 

</HTML > 


第 2 步 ,运行 程序 ,输出 结果 : 


b 大 于 50 
不 管 怎样 ,我 都 能 被 执行 到 ! 


one 

2. for 循环 语句 

for 请 句 也 是 一 种 先 判断 循环 条 件 , 后 运行 循环 语句 ,在 执行 循环 之 前 初始 设置 变量 。 

【语法 】 

for( 初 始 设置 ;循环 条 件 ; 更 新 部 分 ){ 

语句 块 
} 

初始 设置 告诉 循环 的 开始 位 置 , 必 须 赋予 变量 的 初 值 ; 循环 条 件 用 于 判别 循环 停止 时 
的 条 件 。 若 条 件 满 足 , 则 执行 循环 体 ,否则 跳出 。 更 新 部 分 定义 循环 控制 变量 在 每 次 循环 时 
按 什么 方式 变换 。 初 始 位 置 、 循 环 条 件 .更 新 部 分 之 间 必 须 使 用 分 号 分 隔 。 

【 例 5-11】 for 语句 的 使 用 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-11. HTML, 设 为 起 始 页 ， 
添加 代码 : 


< HTML > 

<Meta charset = "utf -8" /> 
<head> 

<title> for 语句 </title> 
</head> 


< script language = "JavaScript"> 
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for (var box = 1; box <= 5 ; box++) { 
alert(box); 
} 

</script > 

</body> 

</HTML> 


第 2 步 ,运行 程序 ,输出 结果 : 


AODcp 


具体 执行 过 程 : 

第 1 步 ,声明 变量 var box 二 1。 

第 2 步 ,判断 box < 一 5。 

第 3 步 ,alert(box) 。 

第 4 步 ,box 十 十 。 

第 5 步 ,再 次 从 第 二 步 执 行 ,直到 判断 为 False。 

for 循环 的 另 一 种 用 法 是 针对 某 对 象 集合 中 的 每 个 对 象 或 某 数 组 中 的 每 个 元 素 ,执行 一 
个 或 者 多 个 语句 。 

【语法 】 


for( 变 量 in 对 象 或 数组 ){ 

语句 集 

} 

【 例 5-12】 for 语句 的 使 用 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-12. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML > 

<head> 

<title> for 语句 </title> 

</head> 

< script language = "JavaScript"> 

var box = { // 创 建 一 个 对 象 

mame': ' 张 三 '， // 键 值 对 ,左边 是 属性 名 , 右边 是 值 

"age': 28, 

"height': 178 

}; 

for (var p in box) { // 列 举 出 对 象 的 所 有 属性 
alert(p); 
其 

</script> 

</body> 

</HTML > 
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第 2 步 ,运行 程序 ,输出 结果 : 


name 
age 
height 


3. while 循环 语句 
【语法 】 


while( 条 件 ){ 
语句 块 ; 
} 


当 条 件 为 True 时 ,反复 执行 循环 体 语 句 ,否则 跳出 循环 体 。 循 环 体 中 必须 设置 改变 循 
环 条 件 的 操作 ,使 之 离 循环 体 终止 更 近 一 步 。 
【语法 】 


Dof 

语句 块 ; 

: 

While (条 件 ) 


do…while 语句 是 先 运行 ,后 判断 的 循环 语句 。 也 就 是 说 ,不 管 条 件 是 否 满足 ,至 少 先 
运行 一 次 循环 体 。 

for 和 while 两 种 语句 都 是 循环 语句 ,使 用 for 语句 处 理 有 关 数 字 时 更 容易 看 懂 , 也 较 紧 
次; 而 while 循环 更 适合 复杂 的 语句 。 

【 例 S-13】〗】 while 语句 实例 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-13. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML> 

< head > 

<title> while 语句 </title> 

</head> 

< Script language = "JavaScript"> 

var box = 1; 

while (box <= 5) { // 先 判断 ,再 执行 
alert(box); 

box+t+; 

} 

box = 1; 

dof{ 

alert(box); 

boxt++; 

} 

while (box <= 5); // 先 运行 一 次 ,再 判断 
</script > 

</body> 

</HTML > 
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第 2 步 , 运 行程 序 , 输 出 结果 : 


i12345 
i12345 


4. break 和 continue 语句 

使 用 break 语句 可 使 循环 从 for 或 while 中 强制 跳出 ,而 continue 只 跳 过 循环 内 剩余 的 
语句 ,并 没有 跳出 循环 体 。 

【 例 5-14】 退出 循环 语句 实例 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-14. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML > 

<head > 

<title> 退 出 循环 语句 </title> 

</head> 

< Script language = "JavaScript"> 

for (var box = 1; box <= 10; box++) { 

if (box == 5) break; // 如 果 box 是 5, 就 退出 循环 
document. write( box); 

document. write( '< br />'); 

for (var box = 1; box <= 10; box++) { 

if (box == 5) continue; // 如 果 box 是 5, 就 退出 当前 循环 
document. write( box); 

document. write( '< br />'); 

} 

</script > 

</body> 

</HTML > 


第 2 步 ,运行 程序 ,输出 结果 : 


1234 
1234678910 


5. try…catch…finally 语句 

try…catch…finally 语句 提供 了 一 种 方法 来 处 理 可 能 发 生 在 给 定 代 码 块 中 的 某 些 或 全 
部 错误 ,同时 仍 保持 代码 的 运行 。 如 果 发 生 了 程序 员 没 有 处 理 的 错误 ,JavaScript 只 给 用 户 
提供 它 的 普通 错误 信息 ,就 好 像 没 有 错误 处 理 一 样 。 

【 话 法 】 

try 

{ 

tryStatements 

} 

catch( exception) 

{ 


catchStatements 


} 
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finally 

{ 
finallyStatements 
} 


其 中 ,try 语句 是 必 选 项 ,tryStatements 表示 可 能 发 生 错 误 的 语句 。 参 数 exception 是 
必 选 项 ,可 表示 为 任何 变量 名 。catch 语句 是 可 选项 ,处 理 try 语句 中 发 生 错 误 的 语句 。 
finally 语句 是 可 选项 ,在 所 有 其 他 的 过 程 发 生 之 后 被 条 件 执 行 的 语句 。 

【 例 5-15】 try 语句 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-15. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML > 
<head > 
<title> try 语句 </title> 
</head> 
< script language = "JavaScript"> 
Try 
{ 
document. write ("Nested try running…</br>") 
} 
catch(e) 
{ 
document. write ("Nested catch caught" + e +"</br>"); 
} 
finally 
{ 
document. write ("Nested finally is running </br >"); 
} 
</script > 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,输出 结果 : 


Nested try running… 
Nested finally is running. 


【 例 5-16】 try 语句 。 
第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-16. HTML , 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML> 

< head> 

<title> try 语句 </title></head> 

< script language = "JavaScript"> 

try{ 
document. write ("Outer try running….</br>"); // 第 1 个 输出 
try{ 
document. write ("Nested try running…</br>");  // 第 2 个 输出 
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throw "an error </br >"; 
} 
catch(e) { 
document. write ("Nested catch caught " + e +"</br>"); 
// 第 3 个 输出 
throw e + " re 一 thrown </br>"; 
// 第 6 个 输出 
上 
finally { 
document. write ("Nested finally is running…</br>")7 
// 第 4 个 输出 
} 
} 
catch(e) { 
document. write ("Outer catch caught " + e +"</br>"); 
// 第 5 个 输出 
} 
finally{ 
document. write ("Outer finally running </br >"); 
// 第 7 个 输出 
上 
</script> 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,输出 结果 : 


Outer try running… 

Nested try running… 

Nested catch caught an error 
Nested finally is running… 
Outer catch caught an error 
re 一 thrown 

Outer finally running 


5.1.7 事件 处 理 


事件 (events) 是 指 对 计算 机 进行 一 定 操作 而 得 到 的 某 一 结果 的 行为 ,例如 ,将 鼠标 移动 
到 某 一 个 超 链 接 上 、 单 击 鼠 标 按钮 等 都 是 事件 。 由 鼠标 或 热 键 引发 的 一 连 串 程序 的 动作 , 称 
为 事件 驱动 (event driver)。 对 事件 进行 处 理 的 程序 或 函数 , 称 为 事件 处 理 程序 (event 
handler) 。 

在 HTML 文件 中 ,可 用 支持 事件 驱动 的 JavaScript 语言 编写 事件 处 理 程 序 。 用 
JavaScript 进行 事件 编程 主要 用 于 两 个 目的 : 验证 用 户 输入 窗 体 的 数据 和 增加 页 面 的 动感 
效果 。 

一 个 HTML 元 素 能 够 响应 鼠标 和 键盘 的 事件 见 表 5-4。 某 些 鼠 标 事件 虽然 事件 名 称 
不 一 样 ,但 响应 效果 几乎 一 样 ,用 户 可 根据 实际 需求 选择 某 个 事件 进行 编程 。 
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表 5-4 鼠标 事件 和 键盘 事件 列表 
事件 名 称 说 明 事件 名 称 说 明 事件 名 称 说 明 
onclick 鼠标 左 键 单 击 ondblclick “| 鼠标 左 键 双击 onmouseup | 松 开 鼠 标 左 键 或 右键 
按 下 鼠标 左 键 或 鼠标 指针 在 该 有 鼠标 指针 离开 该 HTML 
Gaseiowa| 志和 onmouseover | HTML 元 素 经 过 | nmouseout| 元 素 
onmousemove le gl onmousewheel | 滚动 鼠标 滚轮 onfocus de rs 
onkeypress | 击 键 操作 发 生 时 onkeyup “| 松 开 某 个 键 时 onkeydown | 按 下 某 个 键 时 
= 
onchange nds onselect by onblur ”| HTML 元 素 失 去 焦点 时 


上 述 事件 的 使 用 有 两 种 方式 : 一 是 直接 执行 JavaScript 语句 或 调用 JavaScript 中 定义 
的 函数 名 ,又 称 为 内 联 模型 ; 二 是 脚本 模型 。 

内 联 模型 的 事件 在 HTML 对 象 的 事件 中 处 理 JavaScript 函数 或 语句 。 

【语法 】 

HTML 对 象 的 事件 名 称 = "JavaScript 函数 名 或 处 理 语句 " 


【 例 5-17】 编写 鼠标 单 击 事件 (函数 名 )。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-17. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HIML> 

<Meta charset = "utf - 8"/> 

<head> 

< title > 检查 输入 的 字符 串 是 否 全 由 数字 组 成 </title> 
</head> 


< script language = "javascript"> 
function checkNum( str) { 
var TestResult = /\d/. test(str); // 使 用 正则 表达 式 测试 字符 串 是 否 全 由 数字 组 成 
alert(TestResult) ; 
} 
</script > 
<body> 
< input id = "mytext" type = "text" value= '12332> 
< input id = "mybut" type = "button" value = "检查 "onclick = "checkNum(mytext. value)"> 














</body> 
</HTML> 

12357 [ 术 查 | 
第 2 步 ,运行 程序 ,弹出 如 图 5-3 所 示 的 对 话 框 , 单 击 “ 检 查 ” 图 5.3 ”对话 框 


按钮 ,输出 结果 为 True。 

【 例 5-18】 编写 鼠标 单 击 事件 (处 理 语句 ) 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-18. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HIML > 
< Meta charset = "utf 一 8"/> 
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<head> 

<title > 检查 输入 的 字符 串 是 否 全 由 数字 组 成 </title> 

</head> 

<body> 

< input id = "mytext" type = "text" value = '12332> 

< input id = "mybut" type = "button" value = "检查 " 

onclick = "javascript:var TestResult = !/\D/.test(mytext. value); 
/* 使 用 正则 表达 式 测试 字符 串 * / alert(TestResult);"> 

</body> 

</HTML > 


第 2 步 , 运 行程 序 , 输 出 结果 : True。 

这 种 内 联 模型 是 最 传统 的 一 种 处 理事 件 的 方法 。 在 内 联 模 型 中 ,事件 处 理 函 数 是 
HTML 标签 的 一 个 属性 ,用 于 处 理 指 定 事件 。 虽 然 内 联 在 早期 使 用 较 多 ,但 它 是 和 HTML 
混 写 的 ,并 没有 与 HTML 分 离 。 

内 联 模型 违反 了 HTML 与 JavaScript 代码 层次 分 离 的 原则 。 为 了 解决 这 个 问题 ,可 以 
在 JavaScript 中 处 理事 件 。 这 种 处 理 方式 就 是 脚本 模型 。 

脚本 模型 : HTML 描述 对 象 ,在 JavaScript 中 处 理事 件 。 

【语法 】 


< input id= "控件 号 "> 


< script language = "javascript"> 
控件 号 .事件 = 函数 体 ; 


</script> 


【 例 5-19】 鼠标 单 击 (函数 ) 。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-19. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HTML> 
<Meta charset = "utf ~ 8"/> 
<head > 
<title> 检 查 输 入 的 字符 串 是 否 全 由 数字 组 成 </title> 
</head> 
<body> 
< input id = "mytext" type= "text" value = '12332> 
< input id = "mybut" type = "button" value = "检查 "> 
< Script language = "javascript"> 
mybut. onmousedown = function() { /* mybut 为 按钮 的 ID * / 
var TestResult = !/ 八 D/.test(mytext. value); /* 使 用 正则 表达 式 测试 字符 串 是 否 全 是 数字 * / 
alert(TestResult) 
} 
</script > 
</body> 
</HTML> 


第 2 步 ,运行 程序 ,输出 结果 : True。 
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5.2 JavaScript 对 象 编程 


对 象 是 一 种 类 型 , 即 引 用 类 型 ,而 对 象 的 值 就 是 引用 类 型 的 实例 。JavaScript 并 不 完全 
支持 面向 对 象 的 程序 设计 方法 ,不 能 提供 抽象 、 继 承 、 封 装 等 面向 对 象 的 基本 属性 。 但 它 支 
持 开发 对 象 类 型 及 根据 对 象 产生 一 定数 量 的 实例 ,同时 还 支持 开发 对 象 的 可 重用 性 ,实现 一 
次 开发 ,多 次 使 用 的 目的 。 


5.2.1 Object 类 型 


创建 Object 类 型 有 两 种 方法 : 一 种 是 使 用 new 运算 符 ; 另 一 种 是 字面 量 表示 法 。 
使 用 new 运算 符 创建 Object, 如 : 


var p = new Object(); //new 方式 





Pp.x= 10; // x,y 两 个 属性 
p.yY= 10; 

new 关键 字 可 以 省 略 , 如 ， 

var box = Object(); // 省 略 了 new 关键 字 


使 用 字面 量 方式 创建 Object, 如 


Var p={ 
xX:10, 
Y:10 
}; 
所 谓 字面 量 , 是 指 由 字母 ,数字 等 构成 的 字符 串 或 者 数值 , 它 只 能 作为 右 值 出 现 。 所 谓 
右 值 ,是 指 等 号 右边 的 值 ,如 : int a 王 123 这 里 的 a 为 左 值 ,123 为 右 值 。 常 量 和 变量 都 属于 
变量 ,只 不 过 常量 是 赋 过 值 后 不 能 再 改变 的 变量 ,而 普通 的 变量 可 以 再 进行 赋值 操作 。 


int a; //a 为 变量 

const int b=10; //b 为 常量 ,10 为 字面 量 

string str = "hello world"; //str 为 变量 , hello world 为 字面 量 
Object 类 型 的 属性 和 方法 如 下 : 


(1) Object() ,构造 函数 。 

(2) hasOwnProperty(PropertyName) ,检查 给 定 的 属性 是 否 在 当前 的 对 象 实例 中 ,其 
中 PropertyName 必须 以 字符 串 给 定 。 

(3) isPrototypeOf(object) ,检查 传递 的 对 象 是 否 是 另 一 个 对 象 的 原型 。 

(4) propertyIsEnumerable(PropertyName) ,检查 给 定 的 属性 是 否 能 用 for-in 语句 来 
枚 举 。 

(5) toLocaleString() ,返回 的 字符 串 与 执行 环境 的 地 区 对 应 。 

(6) toString() ,返回 字符 串 。 

(7) valueOf() ,返回 对 象 的 字符 串 数值 或 布尔 值 表示 。 

对 象 属性 的 访问 方法 可 以 用 点 表示 法 ,如 p. x,p. y; 也 可 以 用 方 括号 表示 法 ,如 pL"x"j。 
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5.2.2 Array 对 和 象 


可 用 Array 对 象 创建 数组 。 数 组 是 若干 元 素 的 集合 ,每 个 数组 都 用 一 个 名 字 作 为 标识 。 
JavaScript 中 没有 提供 明显 的 数组 类 型 ,可 通过 JavaScript 内 建 对 象 Array 或 使 用 自 定义 对 
象 的 方式 创建 数组 对 象 。 数 组 每 个 元 素 可 以 保存 任何 类 型 ,数组 的 大 小 也 是 可 以 调整 的 。 

1. 使 用 new 关键 字 创 建 数组 


【语法 】 

var 数组 名 二 new Array( 数 组 长 度 值 ) ,如 

var box = new Array(); // 创 建 了 一 个 数组 

var box = new Array(10); // 创 建 一 个 包含 10 个 元 素 的 数组 


var box = new Array("Iphone4", 白 色 ,4500); // 创 建 一 个 数组 并 分 配 好 元 素 
2. 使 用 字面 量 创建 


var box = []; // 创 建 一 个 空 的 数组 

var box = ["Iphone4", 白 色 ,4500]; // 创 建 包含 元 素 的 数组 

创建 数组 后 ,可 通过 [ ] 来 访问 数组 元 素 。 用 数组 对 象 的 属性 length 可 获取 数组 元 素 的 
个 数 。 当 向 用 关键 字 Array 生成 的 数组 中 添加 元 素 时 ,JavaScript 自动 改变 属性 length 的 
值 。JavaScript 中 的 数组 索引 总 是 从 0 开始 ,而 不 是 1。 

3. 使 用 索引 下 标 读 取 数 组 的 值 


alert(box[2]); // 获 取 第 3 个 元 素 
box[2] = "学 生 "; // 修 改 第 3 个 元 素 
box[4] =“" 计 算 机 编程 "; // 增 加 第 5 个 元 素 
4. 使 用 length 属性 获取 数组 元 素 量 

alert(box. length) // 获 取 元 素 个 数 
box. length = 10; // 强 制 元 素 个 数 
5. 栈 方法 


JavaScript 提供 了 一 种 让 数组 的 处 理 方法 类 似 于 其 他 数据 结构 的 处 理 方法 。 可 以 让 数 
组 像 栈 一 样 限 制 插入 和 删除 数据 项 ,为 数组 提供 了 push() 和 pop() 方 法 。 

push( ) 方 法 可 以 接收 任意 数量 的 参数 ,把 它们 逐个 添加 到 数组 的 末尾 ,并 返回 修改 后 
数组 的 长 度 。 而 pop() 方 法 则 从 数组 末尾 移 除 最 后 一 个 元 素 ,减少 数组 的 length 值 ,然后 返 
回 移 除 的 元 素 , 如 


var box = ["Iphone4", 白 色 ,4500]; // 字 面 量 声明 

alert(box. push("2015")); // 数 组 末尾 添加 一 个 元 素 , 并 且 返 回 长 度 
alert(box); // 查 看 数组 

box. pop(); // 移 除数 组 末尾 元 素 ,并 返回 移 除 的 元 素 
alert (box); // 查 看 数组 

6. 队列 方法 


队列 在 数组 的 末端 添加 元 素 , 从 数组 的 前 端 移 除 元 素 。 通 过 push() 向 数组 末端 添加 一 
个 元 素 ,然后 通过 shift() 方 法 从 数组 前 端 移 除 一 个 元 素 , 如 : 
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var box = ["Iphone4", 白 色 ,4500]; 
alert(box. push("2015")); 
alert(box); 

box. shift (); 

alert(box); 


// 字 面 量 声明 

// 数 组 末尾 添加 一 个 元 素 ,并 且 返 回 长 度 
// 查 看 数组 

// 移 除数 组 的 开头 元 素 , 并 返回 移 除 的 元 素 
// 查 看 数组 


为 数组 提供 一 个 unshift() 方 法 , 它 和 shift() 方 法 的 功能 完全 相反 。unshift() 方 法 为 数 


组 的 前 端 添加 一 个 元 素 , 如 : 


box. unshift("apple"); 
alert(box); 


7. 重 排序 方法 


// 数 组 开头 添加 1 个 元 素 
// 查 看 数组 


数组 中 已 经 存在 两 个 可 以 直接 用 来 排序 的 方法 : reverse() 和 sort(), 如 : 


vara = [1,2,3,4,5]; 
alert(a. reverse( )); 
alert(a); 

varb = [4,1,7,3,9,2]; 
alert(b. sort()); 
alert(b); 


// 数 组 

// 北 向 排序 方法 ,返回 排序 后 的 数组 
// 源 数组 也 被 逆向 排序 了 ,说 明 是 引用 
// 数 组 

// 从 小 到 大 排序 ,返回 排序 后 的 数组 
// 源 数组 也 被 从 小 到 大 排序 了 


【 例 5-20】 使 用 自 定义 对 象 的 方式 创建 数组 对 象 。 通 过 function 定义 一 个 数组 ,其 中 
arrayName 是 数组 名 ,size 是 数组 长 度 , 通 过 this[ 记 为 数组 赋值 。 定 义 对 象 后 不 能 马上 使 
用 ,还 必须 使 用 new 操作 符 创 建 一 个 数组 示例 MyArray。 一 旦 给 数组 赋予 了 初 值 ,数组 中 
就 具有 了 真正 意义 的 数据 ,以 后 就 可 以 在 程序 设计 过 程 中 直接 引用 了 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-20. HTML, 设 为 起 始 页 ， 


添加 如 下 代码 : 


< script language = "javascript"> 
function arrayName( size) 
{ 
this. length = size; 
for(var i=0; i<= size;i++) 
this[i] = 0; 
return this; 
’ 
var MyArray = new arrayName(10); 
MyArray[0] = 1; 
MyArray[1] = 2; 
MyArray[2] = 3; 
MyArray[3] = 4; 
MyArray[4] = 5; 
MyArray[5] = 6; 
MyArray[6] =7; 
MyArray[7] = 8; 
MyArray[8] = 9; 
MyArray[9] = 10; 
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alert(MyArray[7]); 
</script >; 


第 2 步 ,运行 程序 ,输出 结果 : 


8 


5.2.3 String 对象 


如 


在 JavaScript 中 ,可 以 将 字符 串 当 作 对 象 来 处 理 


Var String 对 象 实例 名 = "字符 串 值 "; 


Var String 对 象 实例 名 = new String(" 字 符 串 值 "); 


Var String 对 象 实例 名 = String(" 字 符 串 值 "); 


var str = "Hello World"; 
var strl = new String(str); 
var str = String("Hello World"); 


。 创 建 String 对 象 实例 的 语法 如 下 。 


String 对 象 只 有 一 个 属性 , 即 length 属性 ,包含 了 字符 串 中 的 字符 数 ( 空 字符 串 为 0)， 
它 是 一 个 数值 ,可 以 直接 在 计算 中 使 用 。String 对 象 内 置 方法 有 30 多 种 ,如 anchor link、 
substring、indexOf replace 等 ,具体 参阅 5. 1.5 节 的 内 置 函 数 。 部 分 方法 用 法 如 下 : 


(1) anchor() 方 法 ,用 于 创建 HTML 锚 。 

【 话 法 】 

stringObject. anchor(anchorname) 

其 中 anchorname 为 必需 项 ,为 锚 定义 名 称 。 如 


var txt = "Hello world! "; 
document. write(txt. anchor( "myanchor" ) ) ; 


输出 : 


<a name = "myanchor"> Hello world!</a> 
(2) big() 方 法 ,用 于 把 字符 串 显示 为 大 号 字体 。 


var str = "Hello world! "; 
document. write( str. big( )); 


(3) blink() 方 法 ,用 于 显示 闪 动 的 字符 串 。 如 


var str = "Hello world!"; 
document. writel( str. blink()); 


如 
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(4) boldO 〇 方法 ,用 于 把 字符 串 显示 为 粗 体 。 如 


Var str = "Hello world!" 
document. write(str.bold()) 


charAt() 方 法 ,可 返回 指定 位 置 的 字符 。 

【语法 】 

stringObject. charaRt( index) 
其 中 index 为 必需 项 ,表示 字符 串 中 某 个 位 置 的 数字 , 即 字 符 在 字符 串 中 的 下 标 。 字 符 串 中 
第 一 个 字符 的 下 标 是 0。 如 果 参 数 index 不 在 0 与 string. length 之 间 ,该 方法 将 返回 一 个 
空 字符 串 。 

(5) charCodeAt() 方 法 可 返回 指定 位 置 的 字符 的 Unicode 编码 。 这 个 返回 值 是 0 一 
65535 的 整数 。charCodeAt() 方 法 与 charAt() 方 法 执行 的 操作 相似 ,只 不 过 前 者 返回 的 是 
位 于 指定 位 置 的 字符 的 编码 ,而 后 者 返回 的 是 字符 子 串 。 如 


var str = "Hello world!" 
document. write( str. charCodeAt (1)) 


输出 : 

101 

(6) concat() 方 法 ,用 于 连接 两 个 或 多 个 字符 串 。 

【 话 法 】 

stringObject. concat(stringX, stringX, .… , stringX) 
其 中 stringX 为 必需 项 ,是 将 被 连接 为 一 个 字符 串 的 一 个 或 多 个 字符 串 对 象 。 注 意 ,使 用 
“十 ”运算 符 进行 字符 串 的 连接 运算 通常 会 更 简便 一 些 。 如 

var strl = "Hello " 


var str2= "world!" 
document. write(strl. concat( str2)) 


(7) fontcolor() 方 法 ,用 于 按照 指定 的 颜色 显示 字符 串 。 

【 话 法 】 

stringObject. fontcolor(color) 
其 中 color 为 必需 项 ,为 字符 串 规定 font-color。color 值 必须 是 颜色 名 、RGB 值 或 者 十 六 进 
制 数 。 如 


var str = "Hello world!" 


document. write(str. fontcolor("Red")) 


(8) lastIndexOf() 方 法 ,可 返回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 , 在 一 个 字符 串 中 
的 指定 位 置 从 后 向 前 搜索 。 
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【语法 】 

stringObject. lastIndexOf( searchvalue, fromindex) 
其 中 searchvalue 为 必需 项 ,规定 需 检 索 的 字符 串 值 。fromindex 为 可 选 的 整数 参数 ,规定 在 
字符 串 中 开始 检索 的 位 置 , 它 的 合法 取 值 是 0 到 stringObject. length 一 1。 如 省 略 该 参数 ， 


则 将 从 字符 串 的 最 后 一 个 字符 处 开始 检索 。lastIndexOf() 方 法 对 大 小 写 敏 感 。 如 果 要 检 
索 的 字符 串 值 没有 出 现 , 则 该 方法 返回 一 1。 如 


Var str = "Hello world!" 

document. write( str. lastIndexOf("Hello") + "<br />") 
document. write( str. lastIndexOf("World") + "<br />") 
document. write(str. lastIndexOf ("world")) 


输出 : 


(9) link() 方 法 ,用 于 把 字符 串 显示 为 超 链 接 。 

【语法 】 

stringObject. link(url) 
其 中 参数 url 为 必需 项 ,规定 要 链接 的 URL。 如 

Var str = "Free Web Tutorials!" 

document. write( str. link("http://www.w3school.com.cn")) 

(10) match() 方 法 ,可 在 字符 串 内 检索 指定 的 值 , 或 找到 一 个 或 多 个 正则 表达 式 的 匹 
配 。 该 方法 类 似 indexOf() 和 lastIndexOf() ,但 是 它 返回 指定 的 值 ,而 不 是 字符 串 的 位 置 。 

【 话 法 】 

stringObject. match( searchvalue) 
或 

stringObject. match( regexp) 
其 中 searchvalue 为 必需 项 ,规定 要 检索 的 字符 串 值 。 参 数 regexp 为 必需 项 ,规定 要 匹配 的 
模式 的 RegExp 对 象 。 如 果 该 参数 不 是 RegExp 对 象 , 则 需要 首先 把 它 传递 给 RegExp 构造 
函数 ,将 其 转换 为 RegExp 对 象 。 如 


var str = "Hello world!" 

document. write( str. match("world") + "<br />") 
document. write( str. match("World") + "<br />") 
document. write(str.match("worlld") + "<br />") 
document. write( str. match( "world!")) 


输出 : 


world 
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null 

null 

world! 

(11) replace() 方 法 ,用 于 在 字符 串 中 用 一 些 字符 蔡 换 男 一 些 字符 ,或 替换 一 个 与 正则 
表达 式 匹配 的 子 串 。 

【 话 法 】 

stringObject. replace( regexp/substr, replacement) 
其 中 参数 regexp/substr 为 必需 项 .规定 子 字符 串 或 要 替换 的 模式 的 RegExp 对 象 。 如 果 该 
值 是 一 个 字符 串 , 则 将 它 作 为 要 检索 的 直接 量 文本 模式 ,而 不 是 首先 被 转换 为 RegExp 对 
象 。 参 数 replacement 为 必需 项 ,是 一 个 蔡 换 字符 串 。 如 


var str= "Visit Microsoft!"; 
document. write( str. replace( /Microsoft/, "W3School")); 


Visit W3School! 
(12) search() 方 法 ,用 于 检索 字符 串 中 指定 的 子 字符 串 ,或 检索 与 正则 表达 式 相 匹配 的 
子 字符 串 。 如 


stringObject. search(regexp) 


其 中 参数 regexp 可 以 是 需要 在 stringObject 中 检索 的 子 串 ,也 可 以 是 需要 检索 的 RegExp 
对 象 。 要 执行 忽略 大 小 写 的 检索 ,请 追加 标志 i。 返回 值 ， stringObject 中 第 一 个 与 regexp 
匹配 的 子 串 的 起 始 位 置 。 注 释 : 如 果 没 有 找到 任何 匹配 的 子 串 , 则 返回 一 1。search() 对 大 小 
写 敏感 。 如 


var str = "Visit W3School!"; 
document. write( str. search( /W3School/)); 


输出 : 
6 


(13) slice() 方 法 ,可 提取 字符 串 的 某 个 部 分 ,并 以 新 的 字符 串 返 回 被 提取 的 部 分 。 
【语法 】 


stringObject. slice(start,end) 


start 表示 要 抽取 的 片断 的 起 始 下 标 。 如 果 是 负数 , 则 该 参数 规定 的 是 从 字符 串 的 尾部 
开始 算 起 的 位 置 。 也 就 是 说 ,一 1 指 字符 串 的 最 后 一 个 字符 ,一 2 指 字符 串 的 倒数 第 二 个 字 
符 , 以 此 类 推 。 

end 表示 紧 接着 要 抽取 的 片段 的 结尾 的 下 标 。 若 未 指定 此 参数 , 则 要 提取 的 子 串 包括 
start 到 原 字 符 串 结尾 的 字符 串 。 如 果 该 参数 是 负数 ,那么 它 规定 的 是 从 字符 串 的 尾部 开始 
算 起 的 位 置 。 

返回 值 : 一 个 新 的 字符 串 ,包括 字符 串 stringObject 从 start 开始 (包括 start) 到 end 结 
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束 ( 不 包括 end) 为 止 的 所 有 字符 。String. slice() 与 Array. slice() 相 似 。 如 ， 


Var str = "Hello happy world!"; 
document. write(str. slice(6)); 


输出 : 


happy world! ; 
var str = "Hello happy world!"; 
document. writel( str. slice(6,11)); 


输出 ， 
Happy 


(14) split() 方 法 ,用 于 把 一 个 字符 串 分 割 成 字符 串 数组 。 
【语法 】 


stringObject. split( separator, howmany) 


其 中 参数 separator 为 必需 项 ,为 字符 串 或 正则 表达 式 , 从 该 参数 指定 的 地 方 分 割 
stringObject。 参 数 howmany 为 可 选项 ,可 指定 返回 数组 的 最 大 长 度 。 如 果 设 置 了 该 参数 ， 
返回 的 子 串 不 会 多 于 这 个 参数 指定 的 数组 。 如 果 没 有 设置 该 参数 ,整个 字符 串 都 会 被 分 割 ， 
不 考虑 它 的 长 度 。 如 果 把 空 字符 串 ("") ,不 是 空格 ,用 作 separator, 那 么 stringObject 中 的 
每 个 字符 之 间 都 会 被 分 割 。 如 

Var str = "How are you doing today?"; 

document. write( str. split(" ") + "<br />"); 


document. write( str. split("") + "<br />"); 
document. write(str. split(" ",3)); 


输出 : 


How, are, you, doing, today? 

H,O,W, ,a,r,e,, youd,,d,o,i,n,g,,t,o,d,a,y,? 

How, are, you 

(15) substr() 方 法 ,可 在 字符 串 中 抽取 从 start 下 标 开始 的 指定 数目 的 字符 。 
【语法 】 


stringObject. substr(start, length) 


其 中 参数 start 为 必需 项 ,为 要 抽取 的 子 串 的 起 始 下 标 ,必须 是 数值 。 如 果 是 负数 ,那么 该 参 
数 声明 从 字符 串 的 尾部 开始 算 起 的 位 置 。 也 就 是 说 ,一 1 指 字 符 串 中 最 后 一 个 字符 ,一 2 指 
字符 串 中 倒数 第 二 个 字符 ,以 此 类 推 。 

length 为 可 选项 ,为 子 串 中 的 字符 数 ,必须 是 数值 ,如 果 省 略 了 该 参数 ,那么 返回 从 
stringObject 的 开始 位 置 到 结尾 的 字符 串 。 返 回 值 : 一 个 新 的 字符 串 , 包 含 从 stringObject 
的 start( 包 括 start 所 指 的 字符 ) 处 开始 的 lenght 个 字符 。 如 果 没 有 指定 length, 那 么 返回 
的 字符 串 包 含 从 start 到 stringObject 的 结尾 的 字符 。ECMAscript 没有 对 该 方法 进行 标准 
化 ,因此 反对 使 用 它 。 如 
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var str = "Hello world!" 
document. write(str. substr(3,7)) 


输出 : 
lo worl 


(16) substring() 方 法 ,用 于 提取 字符 串 中 介 于 两 个 指定 下 标 之 间 的 字符 。 
【语法 】 


stringObject. substring( start, stop) 


其 中 参数 start 为 必需 项 ,为 一 个 非 负 的 整数 ,规定 要 提取 的 子 串 的 第 一 个 字符 在 
stringObject 中 的 位 置 。 

stop 为 可 选项 ,是 一 个 非 负 的 整数 , 比 要 提取 的 子 串 的 最 后 一 个 字符 在 stringObject 中 
的 位 置 多 1, 如果 省 略 该 参数 ,那么 返回 的 子 串 会 一 直到 字符 串 的 结尾 。 返 回 值 为 一 个 新 的 
字符 串 ,该 字符 串 值 包含 stringObject 的 一 个 子 字符 串 ,其 内 容 是 从 start 处 到 stop 一 1 处 的 
所 有 字符 ,其 长 度 为 stop 一 start。 

substring() 方 法 返回 的 子 串 包括 start 处 的 字符 ,但 不 包括 end 处 的 字符 。 如 果 参 数 
start 与 end 相等 ,那么 该 方法 返回 的 就 是 一 个 空 串 ( 即 长 度 为 0 的 字符 串 )。 如 果 start 比 
end 大 ,那么 该 方法 在 提取 子 串 之 前 会 先 交换 这 两 个 参数 。 与 slice() 和 substr() 方 法 不 同 
的 是 ,substring() 不 接受 负 的 参数 。 如 


var str= "Hello world!" 
document. writel( str. substring(3,7)) 


输出 : 
low 


(17) indexOf() 方 法 ,可 返回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 位 置 。 
【语法 】 


stringObject. indexOf( searchvalue, fromindex) 


其 中 searchvalue 为 必需 项 ,规定 需 检索 的 字符 串 值 。fromindex 为 可 选 的 整数 参数 ,规定 在 
字符 串 中 开始 检索 的 位 置 。 它 的 合法 取 值 是 0 到 stringObject. length 一 1。 如 省 略 该 参数 ， 
则 将 从 字符 串 的 首 字符 开始 检索 。 该 方法 将 从 头 到 尾 地 检索 字符 串 stringObject, 看 它 是 否 
含有 子 串 searchvalue。 开 始 检索 的 位 置 在 字符 串 的 fromindex 处 或 字符 串 的 开头 (没有 指 
定 fromindex 时 )。 如 果 找 到 一 个 searchvalue, 则 返回 searchvalue 第 一 次 出 现 的 位 置 。 
stringObject 中 的 字符 位 置 是 从 0 开始 的 。indexOf() 方 法 对 大 小 写 敏感 。 如 

var str = "Hello world!" 

document. write(str. indexOf ("Hello") + "<br />") 


document. write(str. indexOf ("World") + "<br />") 
document. write(str. indexOf ("world")) 


输出 : 
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二 量 


5.2.4 Math 对 象 


Math 对 象 提供 了 常用 的 数学 函数 和 运算 ,如 三 角 函 数 、 对 数 函 数 、 指 数 函 数 等 。 
(1) 常量 ( 即 属性 ) 。 

Math 中 提供 了 6 个 属性 ,它们 是 : 

下 ,返回 算术 常量 e, 即 自然 对 数 的 底数 ( 约 等 于 2.718) 。 
LN2 ,返回 2 的 自然 对 数 ( 约 等 于 0. 693) 。 

LN10, 返 回 10 的 自然 对 数 ( 约 等 于 2. 302)。 
LOG2E, 返 回 以 2 为 底 的 e 的 对 数 。 

LOG10E, 返 回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0. 434) 。 
PI, 返 回 圆周 率 ( 约 等 于 3. 14159)。 

SQRT1_2, 返 回 2 的 平方 根 的 倒数 ( 约 等 于 0.707) 。 
SQRT2 ,返回 2 的 平方 根 ( 约 等 于 1. 414) 。 如 





document. write("Math.E = "+Math.E+"<br>"); 

document. write("Math. LN2 = "+Math.LN2+"<br>"); 
document. write("Math. LN10 = "+Math.LN10+"<br>"); 
document. write("Math. LOG2E = "+Math.LOG2E+ "< br>"); 
document. write("Math. LOG10E = "+Math.LOG10E+"<br>"); 
document. write("Math. PI = "+Math.PI+"<br>"); 

document. write("Math. SORT1_ 2 = "+ Math.SORT1 2+"<br>"); 
document. write("Math. SORT2 = "+ Math. SQRT2+ "<br>"); 


输出 结果 : 


Math.E = 2.718281828459045 

Math. LN2 = 0.6931471805599453 
Math. LN10 = 2.302585092994046 
Math. LOG2E = 1.4426950408889634 
Math. LOG10E = 0.4342944819032518 
Math.PI = 3.141592653589793 

Math. SORT1_2 = 0.7071067811865476 
Math. SORT2 = 1.4142135623730951 


(2) abs() 方 法 ,可 返回 数 的 绝对 值 。 
【语法 】 


Math. abs(x); 


其 中 x 必须 为 一 个 数值 ,此 数 可 以 是 整数 和 小 数 。 
(3) acos() 和 asin() ,返回 数 的 反 余 弦 值 和 反正 弦 值 。 
【语法 】 


Math. acos(x) 
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Math.asin(x) 


其 中 x 必须 是 一 1. 0 一 1.0 的 数 ; 如 果 x 不 在 上 述 范围 , 则 返回 NaN。 
(4) atan() 方 法 ,返回 数字 的 反正 切 值 。 
【语法 】 
Math. atan(x); x 为 必需 项 ,必须 是 一 个 数值 ,返回 的 值 是 一 PI/2 一 PI/2 的 弧度 值 。 
(5) atan2() 方 法 ,返回 从 X 轴 到 点 (z,y) 之 间 的 角度 。 


【语法 】 

Math. atan2(y,x) ,返回 一 PI 一 PI 的 值 ,是 从 X 轴 正 向 逆 时 针 旋 转 到 点 (zx,y) 时 经 过 的 
角度 。 

(6) ceil() 方 法 ,可 对 一 个 数 进行 上 舍 入 , 即 大 于 等 于 x, 并 且 与 它 最 接近 的 整数 。 

【 话 法 】 


Math. ceil(x); xz 为 必需 项 ,必须 是 一 个 数值 。 如 


document. write(Math. ceil(0.60) + "<br />") 
document. write(Math. ceil(0.40) + "<br />") 
document. write(Math. ceil(5) + "<br />") 
document. write(Math. ceil(5.1) + "<br />") 
document. write(Math. ceil( — 5.1) + "<br />") 
document. write(Math. ceil( ~ 5.9)) 


输出 : 


1 oo ou PP 


5 

一 5 

(7) cos() 和 sin() 方 法 ,返回 一 个 数字 的 余弦 值 和 正弦 值 。 

【语法 】 

Math. cos(x); 

Math. sin(x); 

其 中 参数 x 为 必需 项 ,必须 是 一 个 数值 ,返回 的 是 一 1.0 一 1.0 的 数 。 要 求 x 是 输入 的 一 个 
弧度 值 。 如 

document. write(Math. cos(Math. PI)); 

document. write(Math. cos(Math. PI/2)); 

document. write(Math. cos(Math. PI/3)); 

分 别 输出 一 1,6. 123233995736766e-17,0. 5000000000000001。 

为 什么 会 出 现 这 些 怪 异 的 数字 呢 ? 其 实 大 家 都 知道 document. write(Math. cos(Math. 
PI/2)) ;应 该 输出 0, 而 在 JavaScript 中 可 能 没有 求 得 0, 所 以 就 用 一 个 非常 小 的 数 代替 。 类 
似 的 document. write(Math. cos(Math. PI/3)); 应 该 是 0. 5 才 对 ,但 是 却 在 最 后 面 多 了 一 
位 ,因为 寄存 器 本 身 就 不 可 能 表示 所 有 的 数 , 所 以 在 计算 过 程 中 可 能 出 现 差错 。 
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exp() 方 法 ,可 返回 e 的 x 次 究 的 值 。 
【语法 】 


Math. exp(x); 


其 中 x 为 必需 项 ,为 任意 数值 或 表达 式 ,被 用 作 指 数 。 

floor() 方 法 ,可 对 一 个 数 进行 下 伟人 。 

和 ceil() 方 法 对 应 ,floor() 方 法 是 对 一 个 数 进行 下 舍 入 , 即 小 于 等 于 zx, 且 与 x 最 接近 的 
整数 。 

【语法 】 

Math. floor(x); 


其 中 x 为 必需 项 ,必须 是 一 个 数值 。 如 


document. write(Math. floor(0.60) + "<br />");; 
document. write(Math. floor(0.40) + "<br />"); 
document. write(Math. floor(5) + "<br />"); 
document. write(Math. floor(5.1) + "<br />"); 
document. write(Math. floor( -5.1) + "<br />"); 
document. write(Math. floor( - 5.9)); 


输出 : 


I1muoo 


6 

= 

(8) log() 方 法 ,可 返回 一 个 数 的 自然 对 数 。 

Math. log(x);// 参 数 x 必须 大 于 0, 小 于 0 则 结果 为 NaN ,等 于 0 则 结果 为 一 Infinity。 如 


document. write(Math. 1og(2.7183) + "<br />"); 
document. write(Math. log(2) + "<br />"); 
document. write(Math. log(1) + "<br />"); 
document. write(Math. log(0) + "<br />"); 
document. write(Math. log( — 1)); 


输出 : 


1.0000066849139877 

0.6931471805599453 

0 

— Infinity 

NaN 

(9) max() 和 min() 方 法 ,分 别 返回 两 个 指定 的 数 中 带 有 较 大 或 较 小 的 值 的 那个 数 。 
【语法 】 


Math. max(x- ); 
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Math. min(x, y); 


其 中 x 为 0 或 多 个 值 。 在 ECMAScript v3 前 ,该 方法 只 有 两 个 参数 。 返 回 值 : 参数 中 最 大 
的 值 。 如 果 没有 参数 , 则 返回 -Infinity。 如 果 有 某 个 参数 为 NaN ,或 是 不 能 转换 成 数字 的 非 
数字 值 , 则 返回 NaN。 

x 为 0 或 多 个 值 。 在 ECMAScript v3 前 ,该 方法 只 有 两 个 参数 。 如 


document. write(Math. max(5,3,8,1)); //8 
document. write(Math. max(5,3,8, 'M')); //NaN 
document. write(Math. max(5)); //5 

document. write(Math. max( ) ); //- Infinity 
(10) pow() 方 法 ,可 返回 x 的 y 次 宕 的 值 。 

【 话 法 】 


Math. pow(x, y); 


其 中 x 为 必需 项 ,为 底数 ,必须 是 数字 。y 也 为 必需 项 ,为 宕 数 ,必须 是 数字 。 返 回 值 : 如 果 
结果 是 虚数 或 负数 , 则 该 方法 返回 NaN。 如 果 由 于 指数 过 大 而 引起 浮 点 溢出 , 则 该 方法 返 
回 Infinity。 如 


document. write(Math. pow() + '< br>"); 
document. write(Math. pow(2) + '< br >'); 
document. write(Math. pow(2,2) + '<br>'); 
document. write(Math. pow(2,2,2) + '< br>'); 
document. write(Math. pow( 'M', 2) + '< br >'); 


输出 : 


(11) random() 方 法 ,可 返回 0 一 1 的 一 个 随机 数 。 
【语法 】 
Math. random( ); // 无 参 


返回 : 0.0 一 1.0 的 一 个 伪 随 机 数 。 真 正 意义 的 随机 数 是 某 次 随机 事件 产生 的 结果 ,经 
过 无 数 次 后 表现 为 呈现 某 种 概率 论 , 它 不 可 预测 的 。 而 伪 随 机 数 是 根据 伪 随 机 算法 实现 的 ， 
它 采用 了 一 种 模拟 随机 的 算法 ,因此 被 称 为 伪 随 机 数 。 如 


document. write(Math. random( ) ) 
输出 : 
0.12645312909485157 


(12) round() 方 法 ,可 把 一 个 数字 售 人 为 最 接近 的 整数 。 
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【 话 法 】 
Math. round(x) 
其 中 参数 x 为 必需 项 ,必须 是 数字 。 如 


document. write(Math. round(0.60) + "<br />"); 
document. write(Math. round(0.50) + "<br />"); 
document. write(Math. round(0.49) + "<br />"); 
document. write(Math. round( — 4.40) + "<br />"); 
document. write(Math. round( — 4.60)); 


输出 : 


和 
和 
0 
-4 
一 号 


5.2.5 Number 对 象 
Number 对 象 即 数字 , 它 的 构造 方法 : 


var num = 10; 
var num = new Number(); //num == 0 
var num = new Number(value); 


其 中 value 为 数值 或 是 可 以 转换 为 数值 的 量 ,如 字符 串 '1002'; 但 是 假如 为 'M122', 则 返 
回 NaN。 

(1) 常数 。 

除了 Math 对 象 中 可 用 的 几 个 特殊 数值 属性 (例如 PD 外 ,Number 对 象 还 有 几 个 其 他 
数值 属性 。 

MAX_VALUE, 可 表示 的 最 大 的 数 。 // 1.7976931348623157e + 308 

MIN_VALUE, 可 表示 的 最 小 的 数 。 // 5e- 324 

NEGATIVE_INFINITY, 负 无 穷 大 ,溢出 时 返回 该 值 。// - Infinity 

POSITIVE_INFINITY, 正 无 穷 大 ,溢出 时 返回 该 值 。//Infinity 

NaN, 非 数字 值 . // NaN 

Number. NaN 是 一 个 特殊 的 属性 ,被 定义 为 “不 是 数值 >。 例如 ,被 0 除 返 回 NaN。 
NaN 与 任何 数值 或 本 身 作 比较 的 结果 都 是 不 相等 ,所 以 不 能 用 Number. NaN 比较 测试 一 
个 无 法 被 解析 为 数字 的 字符 串 是 否 为 NaN ,需要 使 用 isNaN() 函 数 测试 一 个 字符 串 是 否 
为 NaN。 

(2) toString() 方 法 ,可 把 一 个 Number 对 象 转换 为 一 个 字符 串 ,并 返回 结果 。 

【语法 】 

NumberObject. toString(radix); 


其 中 参数 radix 为 可 选项 ,规定 表示 数字 的 基数 ,是 2 一 36 的 整数 。 若 省 略 该 参数 , 则 使 用 
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基数 10。 当 调用 该 方法 的 对 象 不 是 Number 时 , 抛 出 TypeError 异常 。 数 字 的 字符 串 表 
示 , 例 如 , 当 radix 为 2 时 ,NumberObject 会 被 转换 为 二 进 制 值 表示 的 字符 串 。 如 


Var num = 10; 


document. write(num.toString(2)) 7 
输出 : 
1010 
(3) toFixed() 方 法 ,可 把 Number 四 舍 五 人 为 指定 小 数位 数 的 数字 。 
【语法 】 
NumberObject. toFixed( num); 
其 中 num 为 必需 项 ,规定 小 数 的 位 数 ,是 0 一 20 的 值 ,包括 0 和 20, 有 些 实现 可 以 支持 更 大 


的 数值 范围 。 如 果 省 略 了 该 参数 ,将 用 0 代替 。 返 回 值 : num 为 0 一 20 时 不 会 抛 出 异常 , 假 
如 num 二 20, 则 有 可 能 抛 出 异常 。 如 : 


var num = new Number(13.37); 
document. write (num. toFixed(1)); 


13.4 

(4) toExponential() 方 法 ,可 把 对 象 的 值 转换 成 指数 计数 法 , 即 科 学 计数 法 。 
【 话 法】 了 

NumberObject.toExponential(num) 


其 中 参数 num 为 必需 项 ,规定 指数 计数 法 中 的 小 数位 数 , 是 0 一 20 的 值 ,包括 0 和 20, 有 些 
实现 可 以 支持 更 大 的 数值 范围 。 如 果 省 略 了 该 参数 ,将 使 用 尽 可 能 多 的 数字 。 如 : 


var num = new Number(10000); 
document. write (num. togxponential (1)); 


输出 : 
1.0e+4 
(5) toPrecision() 方 法 ,可 在 对 象 的 值 超出 指定 位 数 时 将 其 转换 为 指数 计数 法 。 
【语法 】 
toPrecision(num) 
其 中 参数 num 为 指定 的 位 数 , 即 超过 多 少 位 时 采用 指数 计数 法 。 如 


var num = 10000; 
document. write (num. toPrecision(4) + '<br>'); 
document. write (num. toPrecision(8)); 


输出 : 
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1.000e+4 //1.000 共 4 位 数 
10000.000 //10000.000 共 8 位 数 


5.2.6 ”Date 对 和 象 


Date 对 象 是 操作 日 期 和 时 间 的 对 象 。Date 对 象 对 日 期 和 时 间 的 操作 只 能 通过 方法 。 
Data 对 象 可 以 用 来 表示 任意 的 日 期 和 时 间 , 获 取 当 前 系统 日 期 以 及 计算 两 个 日 期 的 间隔 
等 。 常 用 的 方法 有 getFullYear、getMonth、getDate 等 。 通 常 ,Date 对 象 给 出 日 期 月份、 天 
数 和 年 份 以 及 以 小 时 、 分 钟 和 秒表 示 的 时 间 。 该 信息 是 基于 1970 年 1 月 1 日 00:00:00.000 
GMT 开始 的 毫秒 数 ,其 中 GMT 是 格林 尼 治 标准 时 间 (首选 术语 是 UTC, Universal 
Coordinated Time, 或 者 “全 球 标准 时 间 ”, 它 引用 的 信号 是 由 “世界 时 间 标 准 ” 发 布 的 )。 
JavaScript 可 以 处 理 250000 B. C. 到 250000 A. D. 范围 内 的 日 期 。 同 样 ,可 使 用 new 运算 符 
来 创建 一 个 新 的 Date 对 象 。 

【 例 5-21】 Date 对 象 的 使 用 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-21. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 

<HTML> 

< head > 

<Meta charset = "utf 一 8"/> 

<title> 关 于 Date 对 象 的 使 用 </title> 

</head> 

< Script language = "javascript"> 

/x 

本 示例 使 用 前 面 定义 的 月 份 名称 数 组 。 

第 一 条 语句 以 “Day Month Date 00:00:00 Year” 格 式 对 Today 变量 赋值 。 


x*/ 
var Today = new Date(); // 获 取 今 天 的 日 期 
// 提取 年 ,月 ,日 


thisYear = Today. getFullYear(); 
thisMonth = Today.getMonth(); 
thisDay = Today. getDate(); 

// 提取 时 ,分 , 秒 

thisHour = Today. getHours( ); 
thisMinutes = Today. getMinutes( ); 
thisSeconds = Today. getSeconds( ); 


// 提 取 星期 几 
thisWeek = Today. getDay( ); 
nm array(" "~—" oo) 
和 nt 三 
thisWeek = x[thisWeek]; 


varx 


nowDateTime = "现在 是 " + thisYear + "年 " + thisMonth +" 月 "+thisDay+ "日 "; 
nowDateTime += thisHour + "时 " + thisMinutes + "分 " + thisSeconds + " 秒 "; 
nowDateTime += "星期 " + thisWeek; 
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document. write(nowDateTime + "< br >"); // 输 出 : 现在 是 年 月 日 时 分 秒 


// 计 算 两 个 日 期 相差 的 天 数 

Var datestringl = "November 1,1997 10:15 AM"; 

var datestring2 = "December 1,2007 10:15 AM"; 

var DayMilliseconds = 24x60x60x1000; //1 天 的 毫秒 数 

var tl = Date.parse(datestring1) ; // 换 算 成 自 年 月 日 到 年 月 日 的 毫秒 数 

var t2 = Date.parse(datestring2) ; // 换 算 成 自 年 月 日 到 年 月 日 的 毫秒 数 

s = "Thereare" 

s += Math. round(Math.abs((t2— t1)/DayMilliseconds)) + " days " 

s += "between" + datestringl + " and" + datestring2 ; 

document. write( s); // 输 出 : There are 3682 days between November 1,1997 
10:15 AM and December 1,2007 10:15 AM 

</script > 

</hmtl > 

第 2 步 ,运行 程序 ,输出 结果 。 

结果 ; 

现在 是 2017 年 6 月 25 日 19 时 42 分 59 秒 星期 二 

There are 3682 days between November 1,1997 10:15 AM and December 1,2007 10:15 AM 


5.3 JavaScript ActiveX 编程 技术 


一 般 来 说 ,在 计算 机 上 安装 好 系统 软件 和 应 用 软件 后 ,需要 一 些 ActiveX 控件 来 实现 其 
功能 。 例 如 ,FileSystemObject 控件 对 象 提供 对 计算 机 文件 系统 的 访问 ; Excel. Application 
和 Word. Application 分 别提 供 对 Excel 和 Word 的 控制 和 操作 。JavaScript 还 提供 了 
ActiveXObject 方法 实现 对 ActiveX 控件 的 访问 。 


5.3.1 FileSystemObject 控件 


FileSystemObject 控件 对 象 提 供 了 几乎 所 有 访问 磁盘 文件 系统 所 需要 的 功能 ,如 文件 
与 文件 夹 的 创建 和 删除 、 复 制 文件 .删除 文件 .移动 文件 .驱动 器 操作 . 读 写 文件 操作 等 ,具体 
的 属性 方法 和 事件 用 法 可 参阅 相关 资料 。 

1. FileSystemObject 对 象 

JavaScript 实现 文件 操作 功能 ,主要 对 象 为 FileSystemObject, 这 个 对 象 包括 的 相关 对 
象 和 集合 如 下 : 

Driver 对 象 类 型 。 包 括 收集 系统 中 驱动 器 相关 信息 的 方法 和 属性 ,如 共享 名 、 可 用 空间 
等 。 一 个 drive 对 象 不 一 定 代表 一 个 物理 硬盘 ,还 可 以 是 一 个 CD-ROM 驱动 器 一 个 RAM 
盘 或 者 一 个 通过 网 络 逻 辑 连 接 的 资源 。 

Drivers 集合 类 型 。 提 供 系 统 中 一 系列 以 物理 方式 或 者 逻辑 方式 存在 的 驱动 器 对 象 。 

File 对 象 类 型 。 包 括 对 文件 进行 创建 、 删 除 或 者 移动 操作 的 相关 方法 和 属性 ,还 包括 查 
询 文 件 名 称 、 路 径 以 及 其 他 文件 属性 的 方法 和 属性 。 

Files 集合 类 型 。 提 供 包含 在 文件 夹 中 的 一 系列 File 对 象 。 

Folder 对 象 类 型 。 包 括 对 文件 夹 进行 创建 .删除 或 者 移动 操作 的 相关 方法 和 属性 。 
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Folders 集合 类 型 。 提 供 包含 在 文件 夹 中 的 一 系列 Folder 对 象 。 

TextStream 对 象 类 型 。 提 供 文 本 文件 的 读 写 功能 。 

2. FileSystemObject 的 使 用 步 又 

使 用 FileSystemObject 对 象 编程 ,一 般 要 经 过 如 下 步 又 : 

步骤 1: 创建 FileSystemObject 对 象 。 创 建 FileSystemObject 对 象 的 代码 如 下 : 


var fso = new ActiveXObject("Scripting.FileSystemObject"); 


上 述 代码 执行 后 ,fso 就 成 为 一 个 FileSystemObject 对 象 实例 。 

步骤 2: 应 用 相关 方法 。 

创建 对 象 实例 后 ,就 可 以 使 用 对 象 的 相关 方法 。 比 如 ,使 用 CreateTextFile 方法 创建 一 
个 文本 文件 : 


var f1 = fso.createtextfile("c:\\myjstest. txt", true"); 


步骤 3: 访问 对 象 相关 属性 。 

建立 指向 对 象 的 句柄 ,通过 get 方法 访问 对 象 的 相关 属性 ,GetDrive 负责 获取 驱动 器 信 
息 ,GetFolder 负责 获取 文件 夹 信息 ,GetFile 负责 获取 文件 信息 ,如 

var fso = new ActiveXObject("Scripting. FileSystemObject"); 

var fl = fso.GetFile("c:\\myjstest. txt"); 

// 使 用 f1 访问 对 象 的 相关 属性 

var fso = new ActiveXObject("Scripting. FileSystemObject"); 

var fl = fso.GetFile("c:\\myjstest. txt"); 

// 显 示 c:\myjstest. txt 的 最 后 修改 日 期 属性 值 

alert("File last modified: " + f1.DateLastModified); 

使 用 create 方法 建立 的 对 象 ,就 不 必 再 使 用 get 方法 获取 对 象 句柄 了 ,直接 使 用 create 
方法 建立 的 句柄 名 称 : 

var fso = new ActiveXObject("Scripting. FileSystemObject"); 

var fl = fso.createtextfile("c:\\myjstest. txt", true"); 

alert("File last modified: " + f1.DateLastModified); 


3. 操作 驱动 器 

使 用 FileSystemObject 对 象 编程 ,实现 对 驱动 器 (Drives) 和 文件 夹 (Folders) 的 复制 、 移 
动 文件 夹 ,获取 文件 夹 的 属性 等 操作 。Drive 对 象 负责 收集 系统 中 的 物理 或 逻辑 驱动 器 资 
源 内 容 , 它 具有 如 下 属性 。 

TotalSize: 以 字 节 (byte) 为 单位 计算 的 驱动 器 大 小 。 

AvailableSpace 或 FreeSpace: 以 字 节 为 单位 计算 的 驱动 器 可 用 空间 。 

DriveLetter: 驱动 器 字母 。 

DriveType: 驱动 器 类 型 , 取 值 为 removable( 移 动 介 质 ) .fixed( 固 定 介质 ) .network( 网 
络 资源 ) .CD 一 ROM 或 者 RAM 盘 。 

SerialNumber: 驱动 器 的 系列 码 。 

FileSystem: 所 在 驱动 器 的 文件 系统 类 型 , 取 值 为 FAT、FAT32 和 NTFS。 

IsReady: 驱动 器 是 否 可 用 。 
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ShareName: 共享 名 称 。 

VolumeName: 卷 标 名 称 。 

Path 和 RootFolder: 驱动 器 的 路 径 或 者 根 目 录 名 称 。 

【 例 5-22】 关于 Drives 对 象 的 使 用 。 

第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-22. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<HITML > 

<head > 

<Meta charset = "utf — 8"/> 

<title> 关 于 Drives 对 象 的 使 用 </title> 

</head> 

<body> 

< input id = "mybut" type = "button" value = "检查 "> 

< script language = "javascript"> 

mybut. onmousedown = function() { /* mybut 为 按钮 的 ID * / 
Var drv,s =""; 

var fso = new ActiveXObject("Scripting. FileSystemObject"); 


drv = fso. GetDrive(fso. GetDriveName("c:\\")); 
s += "DriveC:" + "— "; 

s += drv.VolumeName + "\n"; 

s += "Total Space: " + drv,.TotalSize/1024; 

s += " Kb" + "\n"; 

s += "Free Space: " + drv.FreeSpace/1024; 

s += " Kb" + "\n"; 





et 来 自 网 页 的 消息 

ee， FE 
</body> 

Dan CE 

第 2 步 ,运行 程序 ,结果 如 图 5-4 所 示 。 5-4 ”Drives 对 象 获取 的 属性 


如 果 运 行程 序 没 有 反应 ,就 须 修改 IE 等 浏览 器 的 ActiveX 
控件 的 配置 ,具体 可 以 参考 图 5-5。 

4. 操作 文件 夹 

操作 文件 夹 (Folders) 涉 及 文件 夹 的 操作 包括 创建 .移动 .删除 以 及 获取 相关 属性 。 相 
关 属 性 和 方法 如 下 : 

FileSystemO 〇 bjec. CreateFolder, 创 建文 件 夹 。 

Folder. Delete 或 FileSystemO 〇 bjec. DeleteFolder, 删 除 文 件 夹 。 

Folder. Move 或 FileSystemObjec. MoveFolder ,移动 文 件 夹 。 

Folder. Copy 或 FileSystemO 〇 Objec. CopyFolder, 复 制 文件 夹 。 

Folder. Name ,获得 文件 夹 名 称 。 

FileSystemObjec. FolderExists ,判断 文件 夹 是 否 存 在 。 

FileSystemObjec. GetFolder, 取 得 存在 Folder 对 象 的 实例 。 

FileSystemObjec. GetParentFolderName, 取 得 文件 夹 的 父 文件 夹 名 称 。 

FileSystemO 〇 bjec. GetSpecialFolder, 取 得 系统 文件 夹 路 径 信息 。 

要 实现 以 上 功能 ,需要 有 足够 的 权限 ,浏览 器 的 安全 模式 需要 设置 为 “中 ”。 如 果 
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JavaScript 脚本 使 用 Scripting. FileSystemObject 的 时 候 报 automation 服务 器 不 能 创建 对 
象 ” 错 误 , 还 应 启用 IE 的 安全 设置 “不 允许 运行 未 标记 为 安全 的 activeX 控件 ”功能 。 

注意 : 如 果 将 相应 的 网 站 设 成 “受信 任 的 站 点 ”, 就 必须 对 “受信 任 的 站 点 "进行 相应 的 
IE 安全 设置 ,此 时 如 果 对 “Internet”IE 设置 ,将 是 徒劳 。 

【 例 5-23】 获取 父 文件 夹 名 称 .创建 文件 夹 .删除 文件 夹 ,判断 是 否 为 根 目 录 等 操作 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-23. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


var fso, fldr,s = ""; 

// 创建 FileSystemObject 对 象 实例 

fso = new RctiveXObject("Scripting.FileSystemObject"); 
// 获取 Drive 对 象 

fldr = fso.GetFolder("c:\\"); 

// 显示 父 目 录 名 称 

alert("Parent folder name is: " + fldr + "\n"); 
// 显示 所 在 drive 名 称 

alert("Contained on drive " + fldr.Drive + "\n"); 
// 判断 是 否 为 根 目录 

if (fldr. IsRootFolder) 

alert("This is the root folder. "); 

else 

alert("This folder isn't a root folder. "); 
alert("\n\n"); 

// 创建 新 文件 夹 

fso. CreateFolder ("C:\\Bogus"); 

alert("Created folder C:\\Bogus" + "\n"); 


150 ” web 系统 与 技术 





// 显示 文件 夹 基 础 名 称 ,不 包含 路 径 名 

alert("Basename = " + fso.GetBaseName("c:\\bogus") + "\n"); 
// 删除 创建 的 文件 夹 

fso. DeleteFolder ("C:\\Bogus"); 

alert("Deleted folder C:\\Bogus" + "\n"); 


第 2 步 ,运行 程序 ,输出 结果 : 


Parent folder name is: C:\ 
Contained on drive c: 

This is the root folder. 
Created folder c:\Bogus 
Basename = bogus 

Deleted folder c:\Bogus 


5.3.2 Excel. Application 控件 


将 网 页 中 的 数据 导入 Excel 中 的 方法 有 很 多 ,这 里 先 介 绍 一 种 , 即 利用 ActiveX 控件 的 
方式 , 即 Excel. Application, 这 个 控件 是 MS 为 Excel 提供 的 编程 接口 ,在 很 多 种 编程 语言 
中 都 可 以 通过 该 接口 来 操纵 Excel 表格 。Application 对 象 是 Microsoft Office Excel 对 象 
模型 中 最 高 级 别 的 对 象 ,表示 Excel 程序 自身 。Application 对 象 提 供 正 在 运行 的 程序 的 信 
息 ,应 用 于 程序 实例 的 选项 以 及 实例 中 打开 的 当前 对 象 。 因 为 它 是 对 象 模型 中 最 高 的 对 象 ， 
Application 对 象 也 包含 组 成 一 个 工作 每 的 很 多 部 件 ,包括 如 工作 短 . 工 作 表 集合 .单元 格 以 
及 这 些 对 象 所 包含 的 数据 等 。JavaScript 操作 Excel. Application 的 常用 方法 有 : 

(1) 创建 一 个 新 的 Excel 表格 。 


var XLObj = new ActiveXObject("Excel. Application"); 


var xlBook = XLObj.Workbooks. Add; // 新 增 工 作 短 
Var ExcelSheet = xlBook.Worksheets(1); // 创 建 工 作 表 
(2) 保存 表格 。 


ExcelSheet. SaveAs("C:\\TEST. XLS" ); 
(3) 使 Excel 通过 Application 对 象 可 见 。 
ExcelSheet. Application. Visible = true; 
(4) 打印 。 
xlBook. PrintOut; 
或 者 : 
ExcelSheet. PrintOut; 
(5) 关闭 。 
xl1Book. Close( savechanges = false); 
或 者 : 


ExcelSheet. Close( savechanges = false); 
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(6) 结束 进程 。 
ExcelSheet. Application. Quit(); 
或 者 : 


XLObj. Quit(); 
XLObj = null; 


(7) 页 面 设置 。 


PageSetup 对 象 包含 所 有 页 面 设置 的 属性 (左边 距 、 底 部 边 距 、 纸 张大 小 等 ), 此 对 象 有 
页 面 、 页 边 距 、 页 眉 / 页 脚 、 工 作 表 和 无 对 应 选项 卡 5 个 类 别 ,共有 49 个 属性 。 


ExcelSheet. ActiveSheet. PageSetup. Orientation = 2; //1 纵向 或 2 横向 
ExcelSheet. ActiveSheet. PageSetup. LeftMargin = 2/0.035; // 左 页 边 距 为 2cm 
ExcelSheet. ActiveSheet. PageSetup. RightMargin = 3/0.035; // 右 页 边 距 为 3cm 
ExcelSheet. ActiveSheet. PageSetup. TopMargin = 4/0.035; // 上 页 边 距 为 4cm 
ExcelSheet. ActiveSheet. PageSetup. BottomMargin = 5/0.035; // 下 页 边 距 为 5cm 
ExcelSheet. ActiveSheet. PageSetup. HeaderMargin = 1/0.035; // 页 眉 页 边 距 为 1cm 
ExcelSheet. ActiveSheet. PageSetup. FooterMargin = 2/0.035; // 页 脚 页 边 距 为 2cm 


这 6 个 属性 的 单位 都 是 “ 磅 ”。 磅 是 打印 字符 的 高 度 的 度量 单位 。1 磅 等 于 1/72in(lin 一 


2 1 


0.0254m) ,或 大 约 等 于 lcm 的 1/28。 如 : 一 < 义 二 一 2.0408<2cm。 


0.035 28 


ExcelSheet. ActiveSheet. PageSetup. CenterHeader = "页 眉 中 部 内 容 "; 


ExcelSheet. ActiveSheet. PageSetup. LeftHeader = 
ExcelSheet. ActiveSheet. PageSetup. RightHeader = 
ExcelSheet. ActiveSheet. PageSetup. LeftFooter = 
ExcelSheet. ActiveSheet. PageSetup. RightFooter = 


"页 眉 左 部 内 容 "; 
"页 眉 右 部 内 容 "; 
"页 脚 左 部 内 容 "; 
"页 脚 右 部 内 容 "; 


ExcelSheet. ActiveSheet. PageSetup. CenterHeader = "&\" 宋 体 ,加 粗 \"&18 长 天 公司 " + datel + 


"至 "+ date2 + "(施工 图 ) 项 目 进 度 检查 表 "; 


ExcelSheet. ActiveSheet. PageSetup. RightHeader = "gD"; 
ExcelSheet. ActiveSheet. PageSetup. PrintGridlines = true; 
ExcelSheet. ActiveSheet. PageSetup. PrintTitleRows = "$1:$1"; 


ExcelSheet. ActiveSheet. PageSetup. Zoom = 75; 


(8) 对 单元 格 操作 , 带 * 部 分 对 于 行 , 列 , 区 域 都 有 相应 属性 。 


ExcelSheet. ActiveSheet. Cells(row, col).Value = "内 容 "; 
ExcelSheet. ActiveSheet. Cells(row, col). Borders. Weight = 1; 


ExcelSheet. ActiveSheet. Cells(row, col). Interior. ColorIndex = 


// 设 置 单元 格 内 容 
// 设 置 单元 格 边框 * 


1; // 设 置 单元 格 底 色 * (1- 黑 


色 ,2- 白色,3- 红 色 ,4- 绿 色 ,5- 蓝 色 ,6- 黄 色 ,7- 粉红 色 ,8- 天 蓝 色 ,9- 痪 土 色 ) 


ExcelSheet. ActiveSheet. Cells(row, col). Interior. Pattern = 1; 
无 ,2- 细 网 格 ,3- 粗 网 格 ,4- 斑点 ,5- 横 线 ,6- 竖 线 ) 
ExcelSheet. ActiveSheet. Cells(row, col). Font. ColorIndex = 1; 
ExcelSheet. ActiveSheet. Cells(row, col). Font. Size = 10; 
ExcelSheet. ActiveSheet. Cells(row, col) .Font. Name = "黑体 "; 
ExcelSheet. ActiveSheet. Cells(row, col). Font. Italic = true; 
ExcelSheet. ActiveSheet. Cells(row, col). Font. Bold = true; 
ExcelSheet. ActiveSheet. Cells(row, col).ClearContents; 
ExcelSheet. ActiveSheet. Cells(row, col). WrapText = true; 


// 设 置 单 元 格 背景 样式 * (1 


// 设 置 字体 颜色 * (与 上 相同 ) 
// 设 置 为 10 号 字 * 

// 设 置 为 黑体 * 

// 设 置 为 斜体 x 

// 设 置 为 粗 体 x 

// 清 除 内 容 x 

// 设 置 为 自动 换行 x 
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ExcelSheet. ActiveSheet. Cells(row, col). HorizontalAlignment = 3; // 水 平 对 齐 方式 枚 举 * (1- 

常规 ,2- 靠 左 ,3- 居 中 ,4- 靠 右 ,5- 填 充 6- 两 端 对 齐 ,7 -一 跨 列 居中 ,8 - 分 散 对 齐 ) 

ExcelSheet. ActiveSheet. Cells(row, col). VerticalAlignment = 2;  // 垂 直 对 齐 方式 枚 举 * (1- 靠 

上 ,2- 居 中 ,3- 靠 下 ,4- 两 端 对 齐 ,5 - 分 散 对 齐 ) 

// 行 , 列 有 相应 操作 : 

ExcelSheet. ActiveSheet. Rows( row). 

ExcelSheet. ActiveSheet. Columns(col) . 

ExcelSheet. ActiveSheet. Rows( startrow + ":" + endrow). // 如 Rows("1:5"), 即 1 一 5 行 

ExcelSheet. ActiveSheet. Columns(startcol+ ":" + endcol). // 如 Columns("1:5"), 即 1 一 5 列 

// 区 域 有 相应 操作 : 

XLObj. Range( startcell + ":" + endcell). Select; // 如 Range("A2:H8"), 即 A 列 第 2 格 
至 H 列 第 8 格 的 整个 区 域 

XLObj. Selection. 

// 合 并 单元 格 

XLObj. Range( startcell + ":" + endcell). MergeCells = true; // 如 Range("A2:H8"), 即 将 A 列 第 2 
格 至 了 H 列 第 8 格 的 整个 区 域 合 并 
为 一 个 单元 格 或 者 : 

XLObj. Range( "A2", XLObj. Cells(8,8)).MergeCells = true; 


(9) 设置 行 高 与 列 宽 。 


ExcelSheet. ActiveSheet. Columns(startcol + ":" + endcol). ColumnWidth = 22; 
// 设 置 从 startcol 到 endcol 列 的 宽度 为 22 

ExcelSheet. ActiveSheet. Rows( startrow + ":" + endrow).RowHeight = 22; 

// 设 置 从 startrow 到 endrow 行 的 宽度 为 22 


【 例 5-24】 利用 ActiveXObject, 将 数据 导出 到 Excel 中 。 
第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-24. HTML , 设 为 起 始 页 ， 
添加 如 下 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
< script language = "javascript" type = "text/javascript"> 
function MakeExcel() { 
Var i,j,n; 
try { 
var xls = new ActiveXObject("Excel. Application"); 
> 
catch(e) { 
alert( "要 打印 该 表 , 必须 安装 Excel 电子 表格 软件 ,同时 浏览 器 须 使 用 "activeX 控件 ", 浏览 器 须 
允许 执行 控件 .请 单 击 "帮助 "了 解 浏览 器 设置 方法 !"); 
return ""; 
} 
xls.visible = true; // 设置 excel 为 可 见 
Var xlBook = xls.Workbooks. Add; 
var xlsheet = xlBook.Worksheets(1); 
<! -- 合 并 --> 
xlsheet. Range(xlsheet. Cells(1,1),xlsheet. Cells(1,7)).mergecells = true; 
xlsheet. Range(xlsheet. Cells(1,1),xlsheet.Cells(1,7)).value= "发 卡 记 录 "; 
xlsheet. Range(xlsheet. Cells(1,1),xlsheet. Cells(1,3)). Interior.ColorIndex = 5; 
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// 设置 底 色 为 蓝 色 
xlsheet. Range(xlsheet. Cells(1,1),xlsheet. Cells(1,6)).Font.ColorIndex = 4; 
// 设置 字体 色 
// xlsheet. Rows(1). Interior .ColorIndex = 5; 
// 设 置 底 色 为 蓝 色 设置 背景 色 Rows(1). Font. ColorIndex=4 
<! -- 设 置 行 高 --> 
xlsheet. Rows(1).RowHeight = 25; 
<! -- 设置 字体 ws. Range(ws. Cells(i0 +1,j0),ws.Cells(i0+1,j1)). Font.Size = 13 --> 
xlsheet. Rows(1). Font. Size= 14; 
<! -- 设 置 字体 设置 选 定 区 的 字体 xlsheet. Range (xlsheet. Cells (i0, j0), ws. Cells (i0, j0)). 
Font. Name = "黑体 "”--> 
xlsheet. Rows(1).Font. Name = "黑体 "; 
<! -- 设置 列 宽 xlsheet. Columns(2) = 14; -一 > 
xlsheet. Columns("R:D") .ColumnWidth = 18; 
<! -- 设 置 显示 字符 ,而 不 是 数字 --> 
xlsheet. Columns(2). NumberForm atLocal = "@"; 
xlsheet. Columns(7). NumberForm atLocal = "@"; 
// 设 置 单元 格 内 容 自 动 换行 
range. WrapText = true; 
// 设 置 单元 格 内 容 水 平 对 齐 方 式 
range. HorizontalAlignment = Excel.XlHAlign. xlHAlignCenter; // 设 置 单元 格 内容 竖 直 堆 砌 方式 
//range. VerticalAlignment = Excel. XlVAlign. xlVAlignCenter 
//range. WrapText = true; xlsheet.Rows(3).WrapText = true 自动 换行 
// 设 置 标题 栏 
xlsheet. Cells(2,1).Value = "卡号 "; 
xlsheet. Cells(2,2).Value = "密码 "; 
xlsheet. Cells(2,3).Value =" 计 费 方 式 "; 
xlsheet. Cells(2,4).Value = "有 效 天 数 "; 
xlsheet. Cells(2,5).Value = "金额 "; 
xlsheet. Cells(2,6).Value = "所属 服 务 项 目 "; 
xlsheet. Cells(2,7).Value = "发 卡 时 间 "; 
var oTable = document.all[ 'fors:data']; 
var rowNum = oTable. rows. length; 








for(i = 2; i<= rowNum; i++) { 
for (j = 1; j<= 7; j++){ 
//HTML table 内 容 写 到 Excel 
xlsheet. Cells(i + 1,j).Value = oTable.rows(i - 1).cells(j - 1). innerHTML; 
} 
} 
<! -- xlsheet.Range(xls.Cells(i+4,2),xls.Cells(rowNum,4)).Merge; -一 > 
//xlsheet. Range(xlsheet. Cells(i, 4), xlsheet. Cells(i— 1,6)).BorderAround,4 
for(mn = 1,mn< = 6;mn++) . xlsheet. Range(xlsheet. Cells(1, mn), xlsheet. Cells(il, j)). Columns. 
AutoFit; 
xlsheet. Columns. AutoFit; 
xlsheet. Range( xlsheet. Cells(1,1),xlsheet. Cells(rowNum + 1,7)).HorizontalAlignment = — 4108; 
// 居 中 
xlsheet. Range( xlsheet.Cells(1,1),xlsheet.Cells(1,7)).VerticalAlignment = ~ 4108; 
xlsheet. Range( xlsheet. Cells(2,1),xlsheet.Cells(rowNum + 1,7)).Font.Size= 10; 
xlsheet. Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum + 1,7)).Borders(3).Weight = 2; 
// 设 置 左边 距 
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xlsheet. Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum + 1,7)).Borders(4).Weight = 2; 
// 设 置 右边 距 
xlsheet. Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum + 1,7)).Borders(1).Weight = 2; 
// 设 置顶 边 距 
xlsheet. Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum + 1,7)).Borders(2).Weight = 2; 


// 设 置 底 边 距 
xls.UserControl = true; 
// 很 重要 ,不 能 省 略 ,不 然 会 出 问题 意思 是 Excel 交 由 用 户 控制 
var fileDialog = xls.FileDialog(2); // 1 表示 打开 ,2 表示 保存 
fileDialog. show( ); 
var savePath = fileDialog.SelectedItems(1); 
//alert( savePath); 
var ss = xlsheet. SaveAs(savePath); 
xls. Quit(); 
下 
</script> 
<title> ziyuanweihu </title> 
</head> 
<body> 
< form id= "fors" method = "post" enctype = "application/x— www— form - urlencoded"> 
<table id = "fors:top" border = "0" cellpadding = "0”cellspacing= "0" width= "100% "> 
<tbody> 
<tr> 
<td class = "left">< img src= "images/jiaol.gif" alt="" /></td> 
<tdclass= "topMiddle"></td> 
<td class = "right">< img src = "images/jiao2.gif" alt ="" /></td> 
</tr> 
</tbody> 
</table> 
< table border = "0" cellpadding = "0" cellspacing = "0" width= "100% "> 
<tbody> 
<tr> 
<td class= "middleLeft"></td> 
<td class = "btstyle"> 
<table id = "fors: sort" border = "0" cellpadding = "0" cellspacing = "0" style = "valign: 
center" width= "100% "> 
<tbody> 
<tr> 
<tdclass= "btstyle"> 
< input type = "button" name = "fors:_id7" value = "生成 excel 文件 " onclick = "MakeExcel()" /> 
</td> 
</tr> 
</tbody> 
</table> 





<table id = "fors:data" border = "1" cellpadding = "0" cellspacing = "1" width = "100% "> 
<thead> 
<tr> 
<th scope = "col">< span id = "fors:data:headerText1"> 卡 号 </span></th> 
<th scope = "col">< span id = "fors:data:headerText2"> 密 码 </span></th> 
<th scope = "col">< span id = "fors:data:headerText3"> 计 费 方式 </span></th> 
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< th scope = "col">< span id = "fors:data:headerText4"> 有 效 天 数 </span></th> 
< th scope = "col"> 人 金额 </th> 
< th scope = "col">< span id = "fors:data:headerText6"> 所 属 服务 项 目 </span></th> 
< th scope = "col">< span id = "fors:data:headerText7"> 发 卡 时 间 </span></th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> h000010010 </td> 
<td> 543860 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
<td> 测 试 项 目 </td> 
<td>2017- 06-23 10:14:40.843 </td> 
</tr> 
<tr> 
<td> h000010011 </td> 
<td> 683352 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
<td> 测 试 项 目 </td> 
<td>2017-06-23 10:14:40.843 </td> 
</tr> 
<tr> 
<td> h000010012 </td> 
<td> 433215 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
<td> 测 试 项 目 </td> 
<td>2017-06-23 10:14:40.843 </td> 
</tr> 
证 > 





<td> h000010013 </td> 
<td> 393899 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2017- 06 -23 10:14:40.843 </td> 
</tr> 
<tr> 
<td> 测 试 项 目 </td> 
<td> h000010014 </td> 
<td> 031736 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
<td> 测 试 项 目 </td> 
<td>2017-06-23 10:14:40.843 </td> 
</tr> 
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< 
<td> h000010015 </td> 
<td>188600 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
< td> 测 试 项 目 </td> 
<td>2017- 06-23 10:14:40.843 </td> 
</tr> 
<tr> 
<td> h000010016 </td> 
<td> 363407 </td> 
<td> 计 点 </td> 
<td> 
</td> 
<td>2.0</td> 
<d> 测 试 项 目 </td> 
<d>2017- 06- 23 10:14:40.843 </td> 
</tr> 
<tr> 
<td> h000010017 </td> 
<td>175315 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
< td> 测 试 项 目 </td> 
<td>2017-06-23 10:14:40.843 </td> 
</tr> 
<tr> 
<td> h000010018 </td> 
<td> 354437 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
<td> 测 试 项 目 </td> 
<td>2017- 06— 23 10:14:40.843 </td> 
</tr> 
<tr> 
< td> h000010019 </td> 
<td>234750 </td> 
<td> 计 点 </td> 
<td></td> 
<td>2.0</td> 
< td> 测 试 项 目 </td> 
<td>2017- 06— 23 10:14:40.843 </td> 
</tr> 
</tbody> 
</table> 
</td> 
<tdclass= "middleRight"></td> 
</tr> 
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</tbody> 
</table> 
<table id = "fors:bottom" border = "0" cellpadding = "0" cellspacing = "0" width= "100% "> 
<tbody> 
<tr> 
<tdclass= "left"> 
< img src = "images/jiao3.gif" alt ="" /> 
</td> 
<td class= "bottomMiddle"> </td> 
<td class= "right"> 
< img src = "images/jiao4.gif" alt="" /></td> 
</tr> 
</tbody> 
</table> 
< input type = "hidden" name = "fors" value = "fors" /> 
</form> 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 5-6 所 示 的 网 页 结果 , 单 击 * 生 成 Excel 文件 ”按钮 ,运行 结 
果 如 图 5-7 所 示 光 保存 文件 ?对 话 框 如 图 5-8 所 示 。 假 设 选择 的 路 径 为 : D 盘 根 目 录 ,文件 
名 为 11. xls, 可 以 查看 是 否 存在 这 个 文件 ,以 检测 是 否 成 功 。 














































































































| 卡号 有 效 天 数 | 金额 发 卡 时 间 

[hooooli00l0 2 试 项 2017-06-23 10:14: 

|_ hooo0i0011 | 683352 2 测试 项 目 2017-06-23 1 

[ho00010012 | 453215 2 测试 项 目 2017-06-23 1 

| ho00010013 | 383899 2 测 试 项 目 2017-06-23 1 

|_ hooo010014 | 031736 2 测试 项 目 2017-06-23 1 

| hoo00i0015 | 188600 2 测试 项 目 2017-06-23 1 

[hoo00l0016 | 363407 2 币 试 项 目 2017-06-23 1 

|_hoo00i0017 | 175315 测试 项 目 2017-06-23 1 
h000010018 | 354437 2 和 草 试 项 目 2017-06-23 1 
h000010019 | 234750 2 测试 项 目 2017-06-23 10: 




















图 5-7 生成 Excel 文件 界面 


如 果 执 行 var xls 二 new ActiveXObject ("Excel，Application"); ,就 会 出 现 “Automation 服 
务 器 不 能 创建 对 象 " 的 错误 ,需要 配置 如 下 内 容 : 

(1) 添加 可 信 站 点 ,如 图 5-9 所 示 。 

(2) 须 修 改 下 浏览 器 的 ActiveX 控件 的 配置 ,配置 过 程 如 图 5-5 所 示 。 


Ts 


一 全 web 系统 与 技术 


We 



































计算 机 ， my doc (D;) ， =| 妇 用 六 于 my doe (Dy 万 
组 织 ” 新建 x 伯 夫 Eee 
= 
"重视 页 国 gg 次 修改 期 入 
> 回国 刻 国 11xlsx 2016/9/10 28 
图 六 和 贞 教材 编写 2016/9/10 21:0¢ 
bp 由 言 乐 有 到 文档 2016/9/10 20:34 
出 班主 任 - 计 科 16-1-2 班 2016/9/4 10:46 
4 浊 计 其 机 有 了 区 局 2016/9/2 21:51 
b 癌 本 地 磋 盘 (Cj B Program Files 2016/8/31 22:5( 
[_ Pea my doc (D} 上 是 360 安 全 浏览 器 下 载 2016/8/23 13:4: 
be my esearch 加 国 a 由 刷 2010//zs lsz 入 
文件 名 (N): 加 
保 生 类 型 (D: [Bicel 工作 项 Cat > 
多 了 天 文件 夫 IRD ~ LW 





5-8 “保存 文件 "对话 框 
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5-9 添加 可 信 站 点 


5.3.3 Word.Application 控件 


将 网 页 中 的 数据 导入 Word 中 的 方法 有 很 多 ,这 里 先 介绍 一 种 利用 ActiveX 控件 的 方 
式 , 即 Word. Application, 这 个 控件 是 MS 为 Word 提供 的 编程 接口 ,在 很 多 种 编程 语言 
都 可 以 通过 该 接口 操纵 Word 文档 。 
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【 例 5-25】 JavaScript 创建 word 文档 。 
第 1 步 , 在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-25. HTML , 设 为 起 始 页 ， 
添加 如 下 代码 : 


<!DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title> JavaScript 创建 word 文 档 </title> 
< Script language = "javascript"> 
WordApp = new ActiveXObject("Word. Application"); // 启 动 Word 


WordApp. Application. Visible = true; // 使 Word 窗口 可 见 

Var mydoc = WordApp. Documents. Add("",0,1); // 新 建 一 个 文档 

WordApp. ActiveWindow. ActivePane. View. Type = 3; //Word 视图 模式 为 页 面 
WordApp. Selection. TYpeText("Test Case" ); // 输 入 字符 串 

WordApp. Selection. HomeKey(5,1); // 光 标 移 到 行 首 

WordApp. Selection. Font. Bold = 9999998; // 相 对 于 加 粗 格式 

WordApp. Selection. WholeStory( ); // 选 中 整个 文档 内 容 

mydoc. SaveAs("C:\\test. doc"); // 存 盘 到 C:\test. doc 

for (i = WordApp.Documents.Count; i>0; i--)1{ // 关 闭 所 有 打开 的 Word 文档 


WordApp. Documents(i).Close(0); 
} 
WordApp. Application. quit(); // 退 出 Word 
</script > 

</head> 
<body> 
</body> 
</HTML> 


第 2 步 ,运行 程序 ,在 C 盘 创 建 了 文件 test. doc。 

【 例 S-26】〗 JavaScript 创建 word 文档 。 

第 1 步 ,在 JavaScriptWebsite 中 添加 HTML 文件 ,命名 为 5-26. HTML, 设 为 起 始 页 ， 
添加 如 下 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
< Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf — 8"/> 
<title> JavaScript 创建 word 文档 </title> 
<script> 
function wordcontorl() { 
var WordApp = new ActiveXObject("Word. Application"); 
var wdCharacter = 1; 
var wdOrientLandscape = 1; 
WordApp. Application. Visible = true; 
Var myDoc = WordApp.Documents. Add(); 
WordApp. ActiveDocument. PageSetup. Orientation = wdOrientLandscape 
WordApp. Selection. ParagraphForm at. Alignment = 1 //1 为 居中 对 齐 ,0 为 居 右 对 齐 
WordApp. Selection. Font. Bold = true 
WordApp. Selection. Font. Size = 20 
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} 


WordApp. Selection. TypeText ("我 的 标题 "); 


WordApp. Selection. MoveRight (wdCharacter); // 光 标 右 移 字符 
WordApp. Selection. TypeParagraph( ) ; // 插 入 段落 
WordApp. Selection. Font. Size = 12 

WordApp. Selection. TypeText ("副标题 "); // 分 行 插入 日 期 
WordApp. Selection. TypeParagraph( ); // 插 入 段落 


var myTable = myDoc.Tables. Add(WordApp. Selection. Range,8,7) //8 行 7 列 的 表格 
//myTable. Style = "网 格 型 " 
var aa = "我 的 列 标题 " 
var TableRange; // 以 下 为 给 表格 中 的 单元 格 赋值 
for (1 = OF <7; tt) { 
with (myTable.Cell(1,i + 1).Range) { 
font. Size = 12; 
InsertAfter(aa); 
ColumnWidth = 4 
} 
} 
for (i = 0; i<7; i++) { 
for(n= 0;n<7; n++){ 
with (myTable.Cell(i + 2,n + 1).Range) { 
font. Size = 12; 
InsertAfter("bbbb"); 


} 
} 
row_count = 0; 
col count = 0 
myDoc. Protect(1) 


wordcontorl() 
</script> 


</head> 


<body></body> 


</HTML > 


第 2 步 ,运行 程序 ,结果 如 图 5-10 所 示 。 


我 的 列 标 题 " 
bbbbr 
bbbbe 
bbbbe 
bbbb* 
bbbbe 
bbbbe 
bbbbr 


我 的 标题 . 
TES 中 
我 的 列 标题 * 我 的 中 标题” 我 的 9 标题 " 我 的 列 标 题 " 我 的 列 标 题 ” 我 的 有 标题” 。 
bbbbe bbbbe bbbbe bbbb” bbbbe bbbbe + 
bbbb* bbbbe bbbb” bbbb” bbbbe bbbb2 人 
bbbb* bbbb. bbbb2 bbbb2 bbbbe bbbb2 - 
bbbbw bbbb. bbbbe bbbb» bbbbe bbbb” + 
bbbbe bbbbe bbbbe bbbbe bbbbe bbbbe 0 
bbbbe bbbbe bbbbe bbbbe bbbbe bbbbe 2 
bbbbw bbbbe bbbbe bbbbe bbbbe bbbb* + 
图 5-10 ”运行 结果 


关于 Excel 和 Word 的 方法 和 属性 ,可 以 在 Word 和 Excel 中 通过 录制 宏 的 功能 先 将 在 
Word 或 Excel 中 操作 的 过 程 通过 录制 宏 的 方式 录制 下 来 ,然后 打开 录制 的 宏 ,它们 是 使 用 
Visual Basic Application 语言 编写 的 程序 ,将 这 些 程 序 复制 到 JavaScript 中 加 以 改造 , 即 可 
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完成 在 JavaScript 中 的 编程 。 对 于 其 中 的 参数 ,可 在 Word 或 Excel 中 ,通过 单 击 “ 工 具 ”| 
“ 宏 ”|“Visual Basic 编辑 器 ”菜单 打开 Visual Basic 编辑 器 , 按 下 F2 键 打 开 对 象 浏 览 器 , 输 
和 参数 后 ,就 可 得 到 参数 对 应 的 值 。 例 如 ,字体 的 加 粗 与 否 通过 参数 wdToggle 设 定 ,查询 
出 来 的 参数 值 为 9999998 。 


.简单 介绍 JavaScript 技术 。 

.比较 网 页 中 使 用 JavaScript 的 几 种 方法 。 

.说 明 JavaScript 中 的 “一 一 ”和 "* 一 一 一 ”的 区 别 。 

使 用 JavaScript 向 Web 页 面 输出 99 乘法 表 。 

使 用 JavaScript 在 Web 页 面 中 屏蔽 功能 键 Shift,Alt,Ctrl。 

。. 补 全 下 面 的 JavaScript 代码 , 读 取 C:\XXX. xls 文件 ,显示 在 Web 页 面 上 。 


宁 


< script language = "javascript" type = "text/javascript"><! -一 
function readExcel() { 

Var excelApp; 

Var excelWorkBook; 

Var excelSheet; 


try{ 

(1) 

(2) 

(3) 
document. write(excelSheet. Cells(6,2).value); //cell 的 值 
excelSheet. usedrange. rows. count; // 使 用 的 行 数 
excelWorkBook. Worksheets. count; // 得 到 sheet 的 个 数 


excelSheet = null; 
(4) 
(5) 
excelApp= null; 
}catch(e){ 
if(excelSheet != null | | excelSheet!= undefined){ 
excelSheet =nul; 
上 
if(excelWorkBook != null | | excelWorkBook!= undefined){ 
excelWorkBook. close( ); 
' 
if(excelApp != null || excelApp!= undefined){ 
excelApp. Application. Quit(); 
excelApp= null; 
} 
} 
// --></script > 





HTML DOM 对 象 编程 


6.1 HTML 文档 对 象 模型 


JavaScript 可 以 重 构 HTML 文档 ,可 以 添加 、 移 除 改变 或 重 排 页 面 上 的 项 目 。 要 改变 
页 面 的 某 个 东西 ,JavaScript 通过 入口 访问 HTML 文档 中 的 元 素 。 这 个 入 口 ,连同 对 
HTML 元 素 进行 添加 移动 、 改 变 或 移 除 的 方法 和 属性 ,都 是 通过 HTML 文档 对 象 模型 
(Document Object Model,DOM) 获 得 的 。 

DOM 定义 了 一 个 平台 中 立 的 模型 ,用 于 处 理 结 点 树 及 与 文档 树 处 理 相 关 的 事件 。 
DOM 是 一 个 能 够 让 程序 和 脚本 动态 访问 和 更 新 HTML 文档 内 容 、 结 构 和 样式 的 语言 平 
台 。HTML DOM 是 一 个 跨 平台 、 可 适应 不 同 程序 语言 的 文件 对 象 模型 ,DOM 解决 了 
Netscaped 的 JavaScript 和 Microsoft 的 JScript 之 间 的 冲突 ,给 予 Web 设计 师 和 开发 者 一 
个 标准 的 方法 ,让 他 们 来 访问 他 们 站 点 中 的 数据 .脚本 和 表现 层 对 象 。 它 采用 直观 一 致 的 方 
式 , 将 HTML 或 XHTML 文件 进行 模型 化 处 理 , 提 供 存 取 和 更 新 文档 内 容 、 结 构 和 样式 的 
编程 接口 。 使 用 DOM 技术 ,不仅 能 够 访问 和 更 新 页 面 的 内 容 及 结构 ,而且 还 能 操纵 文档 的 
风格 样式 。 可 以 将 HTML DOM 理解 为 网 页 的 API。 它 将 网 页 中 的 各 个 HTML 元 素 看 作 
是 一 个 个 对 象 ,从 而 使 网 页 中 的 元 素 可 以 被 JavaScript 等 语言 获取 或 者 编辑 。 

1998 年 ,W3C 发 布 了 第 一 级 的 DOM 规范 。 这 个 规范 允许 访问 和 操作 HTML 页 面 中 
的 每 一 个 单独 的 元 素 。 所 有 的 浏览 器 都 执行 了 这 个 标准 。 因 此 ,DOM 的 兼容 性 问题 也 几 
乎 难 疯 踪影 了 。DOMI 级 由 两 个 模块 组 成 : DOM 核心 (DOM Core) 和 DOM HTML。DOM 
核心 规定 的 是 如 何 映射 基于 XML 的 文档 结构 ,以 便 简化 对 文档 中 任意 部 分 的 访问 和 操作 。 
DOM HTML 模块 则 在 DOM 核心 的 基础 上 加 以 扩展 ,添加 了 针对 HTML 的 对 象 和 方法 。 

DOM2 级 在 原来 DOM 的 基础 上 又 扩充 了 (DHTML 一 直 都 支持 的 ) 鼠 标 和 用 户 界面 事 
件 . 范 围 . 遍 历 ( 迭 代 DOM 文档 的 方法 ) 等 细 分 模块 ,而 且 通 过 对 象 接口 增加 了 对 层 释 样式 
表 (Cascading Style Sheets,CSS) 的 支持 。 

DOM3 级 则 进一步 扩展 了 DOM, 引 入 了 以 统一 方式 加 载 和 保存 文档 的 方法 一 一 在 
DOM 加 载 和 保存 (DOM Load and Save) 模 块 中 定义 ; 新 增 了 验证 文档 的 方法 一 一 在 DOM 
验证 (DOM Validation) 模 块 中 定义 。DOM3 级 也 对 DOM 核心 进行 了 扩展 ,开始 支持 XML 
1.0 规范 ,涉及 XML Infoset、XPath 和 XML Base。 

2014 年 5 月 8 日 ,W3C 的 HTML 工作 组 发 布 了 文档 对 象 模 型 W3C DOM4 的 备 选 推 
荐 标准 (Candidate Recommendation) ,向 公众 征集 参考 实现 。 有 关 DOM 的 最 新 标准 ,可 以 
参考 http://www. w3. org/ TR/dom/。 
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6.2 浏览 器 的 主要 对 象 


正 浏览 器 的 HTML DOM 对 象 层 次 如 图 6-1 所 示 。 在 层次 图 中 ,每 个 对 象 是 它 的 父 
对 象 的 属性 ,如 window 对 象 是 document 对 象 的 父 对 象 , 所 以 引用 document 对 象 就 可 以 
使 用 window. document, 相 当 于 document 是 window 对 象 的 属性 。 对 于 每 一 个 页 面 ,浏览 
器 都 会 自动 创建 window 对 象 document 对 象 ,location 对 象 ,navigator 对 象 .history 对 象 。 





window 











| 
event document frame history location 


image form link layer 


button table checkbox 


1 


navigator 








1 
scream 











图 6-1 I 浏览 器 的 HTML DOM 对 象 层次 


6.2.1 window 对 象 


window 对 象 表示 一 个 浏览 器 窗口 或 一 个 框架 ,处 于 对 象 层 次 的 最 顶端 。 每 个 对 象 代 
表 一 个 浏览 器 窗口 ,封装 了 窗口 的 方法 和 属性 。 如 果 文 档 包 含 框架 (frame 或 iframe 标 
签 ) ,浏览 器 会 为 HTML 文档 创建 一 个 window 对 象 ,并 为 每 个 框架 创建 一 个 额外 的 
window 对 象 。 虽 然 没 有 应 用 于 window 对 象 的 公开 标准 ,不 过 所 有 浏览 器 都 支持 该 
对 象 。 

1. window 对 象 集合 

frames[ ]: 返回 窗口 中 所 有 命名 的 框架 。 

该 集合 是 window 对 象 的 数组 ,每 个 window 对 象 在 窗口 中 含有 一 个 框架 < frameset > 
或 浮动 框架 < iframe >。frames[] 数 组 中 引用 的 框架 可 能 还 包括 框架 ,它们 自己 也 具有 
frames[ ] 数 组 。 属 性 frames. length 存放 数组 frames[ ] 中 含有 的 元 素 个 数 。 

要 引用 窗口 中 的 一 个 框架 ,使 用 方法 如 下 : 

frame[i] // 当 前 窗口 的 框架 

self. frame[i]  ”// 当 前 窗口 的 框架 

w. frame[ i] // 窗 口 w 的 框架 


要 引用 一 个 框架 的 父 窗 口 (或 父 框架 ) ,可 以 使 用 下 面 的 语法 : 


parent // 当 前 窗口 的 父 窗口 
self. parent // 当 前 窗口 的 父 窗口 
Ww. parent // 窗 口 w 的 父 窗口 


要 从 顶层 窗口 含有 的 任何 一 个 框架 中 引用 它 , 可 以 使 用 如 下 语法 : 
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top // 当 前 框架 的 顶层 窗口 
self. top // 当 前 框架 的 顶层 窗口 
f.top // 框 架 上 的 顶层 窗口 


window 对 象 的 frame 集合 对 象 实现 了 在 浏览 器 脚本 程序 中 对 框架 的 处 理 。frames 
( 帧 ,又 称 框架 ) 可 以 实现 窗口 的 分 隔 操作 。 可 以 把 一 个 窗口 分 隔 成 多 个 部 分 ,每 个 部 分 称 为 
一 个 帧 ,每 个 帧 本 身 已 是 一 类 窗口 ,继承 了 窗口 对 象 所 有 的 属性 和 方法 。frames 集合 对 象 
是 通过 HTML 标记 < frame >、< frameset > 来 创建 的 , 它 包 含 了 一 个 窗口 中 的 全 部 帧 数 。 
FRAMESET 元素 是 FRAME 元 素 的 容器 。HTML 文档 可 包含 FRAMESET 元 素 或 
BODY 元 素 之 一 ,而 不 能 同时 包含 两 者 。 

要 得 到 窗口 中 的 所 有 帧 对 象 集合 ,用 window. parent. frames 或 window. top. frames 即 
可 。 用 self 指定 当前 帧 ,例如 ,指定 当前 帧 跳 转 到 另 一 个 Web 页 ,用 window. self. navigate 
("new. htm") 即 可 。 

【 例 6-1】 建立 页 面 框架 6-1-frame. HTML 文件 ,包括 帧 名 为 top 和 bottom 的 两 个 帧 ,其 
中 帧 top 的 src 为 6-2-top. HTML, 帧 bottom 的 src 为 6-1-bottom. HTML, 而 6-1-bottom. 
HTML 中 又 嵌 套 了 帧 名 为 b 和 < 的 两 个 帧 ,其 中 帧 c 的 src 为 6-1-bottom-right. HTML。 

第 1 步 ,使 用 VS 2013 建立 一 个 空 网 站 项 目 ,命名 为 DomWebsite。 

第 2 步 , 为 项 目 添 加 一 个 HTML 新 项 ,命名 为 Ex6-1. HTML, 设 置 为 起 始 页 ,添加 如 下 
代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<frameset rows = "20%,80%"> 
< frame id = "top" src = "Ex6— 1- top.HIML"> 
< frame id = "bottom”src = "Ex6—1— bottom. HTML"> 
</frameset > 
</HTML> 


第 3 步 ,为 项 目 添加 一 个 HTML 新 项 ,命名 为 Ex6-1- top. HTML ,添加 如 下 代码 : 


<!DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http ~ equiv = "Content - Type" content = "text/HTML; charset = gb2312" /> 
<title></title> 
</head> 
<body> 
Im the top page! 
</body> 
</HTML> 


第 4 步 , 为 项 目 添加 一 个 HTML 新 项 ,命名 为 Ex6-1- bottom. HTML ,添加 如 下 代码 : 
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<! DOCTYPE HTML > 
< HTML xmlns = "http://www.w3. org/1999/xHTML"> 
<head> 
<title></title> 
<Meta http - equiv = "Content - Type" content = "text/HIML; charset =utf -8" /> 
< frameset cols = "30%, *"> 
< frame name = "b"> 
< frame name= "c" src="6—1- botton- right.HIML"> 
</frameset > 
</head> 
</HTML > 


第 5 步 ,为 项 目 添加 一 个 HTML 新 项 ,命名 为 Ex6-1-bottom-right. HTML ,添加 如 下 
代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 


<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 


< script language = "javascript"> 
function changeStyle() 


{ 
var frm = window.parent. frames; 
window. alert(window. parent. frames. length);  // 显 示 一 个 窗口 被 分 成 几 个 帧 
var frm = document. frames; 
for (i = 0; i< frm.length; i++) 
window. alert (frm(i). location); // 显 示 每 个 帧 的 URL 地 址 
window. self. navigate("Ex6 一 1 一 new.HTML");  ”// 当 前 帧 跳 转 到 新 的 页 
} 
</script > 
</head> 
< input type = "button" onclick = "changeStyle()" value = "showme"> 
</HTML> 
第 6 步 , 为 项 目 添加 一 个 HTML 新 项 ,命名 为 6-1- new. HTML ,添加 如 下 代码 : 
<HITML > 
< head> </head> 
< body> 
< input type = "button" value= "I am a new HTML doc" /> 
</body> 
</HTML > 


第 7 步 ,运行 程序 ,得 到 图 6-2。 
2. window 对 象 属性 
在 客户 端 JavaScript 中 ,window 对 象 是 全 局 对 象 , 所 有 的 表达 式 都 在 当前 环境 中 计算 。 
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T'm the top pagel 























图 6-2 程序 结果 


也 就 是 说 ,要 引用 当前 窗口 根本 不 需要 特殊 的 语法 ,可 以 把 那个 窗口 的 属性 作为 全 局 变量 使 
用 。 例 如 ,可 以 只 写 document, 而 不 必 写 window. document。window 对 象 的 属性 及 其 描 
述 见 表 6-1。 

表 6-1 window 对 象 的 属性 及 其 描述 




















属 性 描 述 
closed 返回 一 个 布尔 值 , 声 明了 窗口 是 否 已 经 关闭 ,为 只 读 属 性 
document 对 document 对 象 的 只 读 引用 。 请 参阅 document 对 象 
history 对 history 对 象 的 只 读 引 用 。 请 参数 history 对 象 
length 设置 或 返回 窗口 中 的 框架 数量 
location 用 于 窗口 或 框架 的 location 对 象 
name 设置 或 返回 窗口 的 名 称 





navigator 对 navigator 对 象 的 只 读 引用 

返回 对 创建 此 窗口 的 窗口 的 引用 。 只 有 表示 顶层 窗口 的 window 对 象 的 opener 属性 才 
有 效 ,表示 框架 的 window 对 象 的 opener 属性 无 效 

pageXOffset | 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 和 角 的 X 位 置 

pageYOffset | 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 Y 位置 





opener 

















parent 返回 父 窗 口 
screen 对 screen 对 象 的 只 读 引用 
self 返回 对 当前 窗口 的 引用 ,等 价 于 window 属性 





一 个 可 读 可 写 的 字符 串 ,在 窗口 状态 栏 显 示 一 条 消息 , 当 擦 除 status 声明 的 消息 时 ,状态 
栏 恢复 成 defaultstatus 设置 的 值 
window window 属性 等 价 于 self 属性 , 它 包 含 了 对 窗口 自身 的 引用 


status 








screenLeft 
screenTop 只 读 整 数 。 声 明了 窗口 的 左上 角 在 屏幕 上 的 工 坐标 和 >y 坐标 。IE、Safari 和 Opera 支持 
ScreenX screenLeft 和 screenTop ,而 Firefox 和 Safari 支持 screenX 和 screenY 


ScreenY 
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3. window 对 象 方法 


window 对 象 的 方法 及 其 描述 见 表 6-2, 下 面 以 showModalDialog .showModelessDialog 方 
法 为 例 详细 介绍 。 这 两 种 方法 分 别 用 于 从 父 窗 口中 弹出 模 态 和 无 模 态 对 话 框 。 有 模 态 对 话 
框 是 指 只 能 用 鼠标 或 键盘 在 该 对 话 框 中 操作 ,而 不 能 在 弹出 对 话 框 的 父 窗口 中 进行 任何 操 
作 。 它 们 的 用 法 和 open 方法 类 似 , 不 过 ,它们 可 以 接受 父 窗口 传递 来 的 参数 。 


表 6-2 window 对 象 的 方法 及 其 描述 








方 ” 法 描 述 
alert() 显示 带 有 一 段 消 息 和 一 个 确认 按钮 的 警告 框 
blur() 把 键盘 焦点 从 顶层 窗口 移 开 





clearInterval() 


取消 由 setInterval() 设 置 的 timeout 





clearTimeout() 


取消 由 setTimeout() 方 法 设置 的 timeout 









































close() 关闭 浏览 器 窗口 

confirm() 显示 带 有 一 段 消 息 以 及 确认 按钮 和 取消 按钮 的 对 话 框 
createPopup() 创建 一 个 pop-up 窗口 

focus() 把 键盘 焦点 给 予 一 个 窗口 

moveBy() 相对 于 之 前 的 点 再 移动 一 段 距离 

moveTo() 把 窗口 的 左上 角 移动 到 一 个 指定 的 坐标 

open() 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
print() 打印 当前 窗口 的 内 容 

prompt() 显示 可 提示 用 户 输入 的 对 话 框 

resizeBy() 按照 指定 的 像素 调整 窗口 的 大 小 

resizeTo() 把 窗口 的 大 小 调整 到 指定 的 宽度 和 高 度 

scrollBy() 按照 指定 的 像素 值 滚动 内 容 

scrollTo() 把 内 容 滚动 到 指定 的 坐标 





setInterval() 


按照 指定 的 周期 (以 毫秒 计 ) 调 用 函数 或 计算 表达 式 





setTimeout() 


在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 











showModalDialog 从 父 窗 口中 弹出 有 模 态 对 话 框 
showModelessDialog 从 父 窗 口中 弹出 无 模 态 对 话 框 


IE 4.0 版 本 以 上 都 支持 有 模 态 对 话 框 模式 方法 showModalDialog(),IE 5.0 版 本 以 上 
都 支持 无 模 态 对 话 框 模式 方法 showModelessDialog(), 它 们 也 可 以 分 别 通 过 window. 
showModalDialog() 方 法 和 window. showModelessDialog() 方 法 创建 一 个 显示 HTML 内 
容 的 模 态 对 话 框 和 显示 HTML 内 容 的 非 模 态 对 话 框 。 


【语法 】 


vReturnValue 


vReturnValue 


参数 说 明 : 


window. showModalDialog( sURL [, vArguments] [, sFeatures]) 
window. showModelessDialog( sURL [, vArguments] [, sFeatures]) 


sURL, 必 选 参 数 , 类 型 : 字符 串 。 用 来 指定 对 话 框 要 显示 的 文档 的 URL。 
vArguments ,可 选 参数 ,类 型 : 变 体 。 用 来 向 对 话 框 传递 参数 。 传 递 的 参数 类 型 不 限 ， 
包括 数组 等 。 对 话 框 通过 window. dialogArguments 取得 传递 来 的 参数 。 
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sFeatures, 可 选 参数 ,类 型 : 字符 串 。 用 来 描述 对 话 框 的 外 观 等 信息 ,可 以 使 用 以 下 的 
一 个 或 几 个 ,用 分 号 *;” 隔 开 。 


dialogHeight // 对 话 框 高 度 , 不 小 于 100px 

dialogWidth // 对 话 框 宽度 

dialogLeft // 离 屏幕 左 的 距离 

dialogTop // 离 屏幕 上 的 距离 

center: { yes | no |1|0} // 是 否 居中 ,默认 为 yes, 但 仍 可 以 指定 高 度 和 宽度 
help: {yes | no |1|10} // 是 否 显 示 帮 助 按钮 ,默认 为 yes 


resizable: {yes | no | 1 1 01 [IE5+] // 是 否 可 被 改变 大 小 ,默认 为 no 
status: {yes | no |1|0}[IE5+] // 是 否 显 示 状 态 栏 ,默认 为 yes[ Modeless] 或 no[ Modal] 
scroll: { yes | no | 110|on|off} // 是 否 显示 滚动 条 ,默认 为 yes 


【 例 6-2】 window. open 属性 应 用 。 
第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-2. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HIML> 

<body> 

< script type = "text/javascript"> 

myWindow = window. open( '', 'myName', "width= 200, height = 1007) 
myWindow. document. write("This is 'myWindow'") 

myWindow. focus( ); 

myWindow. opener. document. write( "this is the parent window") 
</script > 

</body> 

</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 6-3 所 示 的 结果 。 





(ets 


6-3 程序 运行 结果 


【 例 6-3】〗 利用 window 属性 和 方法 应 用 ,判断 当前 窗 体 是 否 是 顶层 窗 体 。 
第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-3. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HTML> 

< head> 

< script type = "text/javascript"> 
function checkTopSel(){ 
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if(window. top == window. self){ 
alert( 'You are at the top window. ' + window.1location); 
} 
} 
</script > 
</head> 
<body> 
< input type = "button" onclick = "checkTopSel()" value = "判断 当前 窗 体 是 否 是 顶层 窗 体 "/> 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 6-4 所 示 的 结果 。 


判断 当前 窗 体 是 否 是 顶层 窗 体 

















来 自 网 页 的 消息 





1 You are at the top window. http://localhost64525/Ex6-3.html 





6-4 程序 运行 结果 


【 例 6-4】 利用 window 属性 和 方法 应 用 ,判断 窗口 的 状态 。 
第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-4. HTML, 设 置 为 起 
始 页 ,添加 如 下 代码 : 


<HTML > 
<head> 
< script type = "text/javascript"> 
function checkWin( ) 
{ 
if(myWindow. closed) 
document. write(" 'myWindow' has been closed! ") 
else 
document. write("'myWindow' has not been closed! ") 
} 
</script > 
</head> 
<body> 
< script type = "text/javascript"> 
myWindow = window. open( '', '', width = 200, height = 100°'); 
myWindow. document. write("This is ‘myWindow'"); 
myWindow. defaultStatus("this is my first Window" ) 7 
</script > 
< input type = "button" value = "Has 'myWindow' been closed?" onclick = "checkWin()"/> 
</body> 
</HTML > 


第 2 步 ,运行 程序 。 
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【 例 6-5】 window 的 prompt、confirm 和 alert 方法 的 应 用 。 方 法 用 于 实现 对 话 框 功 
能 ,其 中 prompt 为 接受 用 户 输入 字符 串 的 对 话 框 ; alert 为 输出 文本 对 话 框 ,confirm 实现 
具有 确认 和 取消 按钮 的 对 话 框 。 

第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-5. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 

< script language = "JavaScript"> 

var test = window. prompt(" 请 输入 数据 :"); 

var YorN = confirm(" 你 输入 的 数据 是 " + test + ", 确 定 吗 ?"); 

if (YorN) alert(" 输 入 正确 !"); 

else 

alert(" 输 入 不 正确 !"); 

</script > 

第 2 步 , 运 行程 序 , 得 到 如 图 6-5 所 示 的 “输入 ”对 话 框 ,输入 4, 单 击 “ 确 定 ” 按 钮 ,得 到 如 
图 6-6 所 示 的 “确定 ”对 话 框 , 单 击 “ 确 定 ” 按 钮 ,弹出 输入 正确 的 对 话 框 。 








@ “ee nr， 








图 6-5 “输入 ”对 话 框 图 6-6 “确定 ”对 话 框 








【 例 6-6】 window. showModalDialog 方法 的 应 用 。 
第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-6-parent. HTML, 设 
置 为 起 始 页 ,添加 如 下 代码 ， 


< Script> 
var obj = new Object(); 
obj. name = "51js"; 

window. showModalDialog("6 — 6 — modal. HTML", obj, "dialogWidth = 200px; dialogHeight = 100px" ); 
</script > 


第 2 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-6- modal. HTML, 添 
加 如 下 代码 : 


<HIML> 
<head> 
<title> This isa modal window </title> 
< script language = "JavaScript"> 
var obj = window.dialogArguments 
alert(" 您 传递 的 参数 为 : " + obj.name) 
</script> 
</head> 
<body> hi, I'm here. 
</body> 
</HTML> 


第 3 步 ,运行 程序 。 
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6.2.2 navigator 对 象 


navigator 对 象 包 含有 关 浏 览 器 的 信息 ,是 window 对 象 的 属性 。 由 于 navigator 没有 统 
一 的 标准 ,因此 各 个 浏览 器 都 有 自己 不 同 的 navigator 版 本 ,这 里 只 介绍 最 普遍 支持 且 最 常 
用 的 。 虽然 没 有 应 用 于 navigator 对 象 的 公开 标准 ,但 是 所 有 浏览 器 都 支持 该 对 象 。 

1. navigator 对 象 集合 plugins[ ] 

该 集合 是 一 个 plugin 对 象 的 数组 ,其 中 的 元 素 代表 浏览 器 已 经 安装 的 插件 。plugin 对 
象 提供 的 是 有 关 插 件 的 信息 ,其 中 包括 它 所 支持 的 MIME 类 型 的 列表 。 虽 然 plugins[ ] 数 
组 是 由 IE 4 定义 的 ,但 是 在 IE 4 中 它 却 总 是 空 的 ,因为 IE 4 不 支持 插件 和 plugin 对 象 。 

使 用 本 数组 可 以 引用 客户 端 安装 的 plugin 对 象 。plugins 数组 的 每 个 元 素 都 是 一 个 
plugin 对 象 。 例 如 ,如 果 在 客户 端 安装 了 3 个 插件 ,这 3 个 插件 将 被 映射 为 navigator. 
plugins[0] ,navigator. plugins[ 1 ] 和 navigator. plugins[ 2]。 

使 用 plugins 数组 有 两 种 方法 : navigator. plugins[ index] 和 navigator. plugins[ index] 
[MIMETypeIndex]。 其 中 ,index 是 一 个 表明 客户 端 所 安装 插件 顺序 的 整 型 数 ,或 者 是 包 
含 plugin 对 象 名 称 ( 可 从 name 属性 中 查 到 ) 的 字符 串 。 第 一 种 格式 将 返回 存储 在 plugins 
数组 中 指定 位 置 的 plugin 对 象 。 第 二 种 格式 将 返回 该 plugin 对 象 中 的 MIMEType 
对 象 。 

要 获得 客户 端 已 安装 的 插件 数目 ,可 以 使 用 length 属性 : navigator. plugins. length。 

plugins. refresh:plugins 数组 有 其 自己 的 方法 , 即 refresh。 此 方法 将 使 得 最 新 安装 的 
插件 可 用 ,更 新 相关 数组 ,如 plugins 数组 ,并 可 选 重 新 装 入 包含 插件 的 已 打开 文档 。 可 以 
使 用 下 列 语句 调用 该 方法 : navigator. plugins. refresh(true) 或 navigator. plugins. refresh 
(false) 。 如 果 为 true,refresh 将 在 使 得 新 安装 的 插件 可 用 的 同时 ,重新 装 人 所 有 包含 有 岩 
入 对 象 (EMBED 标签 ) 的 文档 。 如 果 为 false, 该 方法 则 只 会 刷新 plugins 数组 ,而 不 会 重新 
载 入 任何 文档 。 当 用 户 安装 插件 后 ,该 插件 将 不 会 可 用 ,除非 调用 了 refresh ,或 者 用 户 关闭 
并 重新 启动 了 navigator。navigator 对 象 的 常见 属性 见 表 6-3。 

表 6-3 navigator 对 象 的 常见 属性 


属 性 描 述 
appCodeName 返回 浏览 器 的 代码 名 
appMinorVersion 返回 浏览 器 的 次 级 版 本 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
browserLanguage 返回 当前 浏览 器 的 语言 
CookieEnabled 返回 指明 浏览 器 中 是 否 启用 Cookie 的 布尔 值 





























cpuClass 返回 浏览 器 系统 的 CPU 等 级 
onLine 返回 指明 系统 是 否 处 于 脱 机 模式 的 布尔 值 

返回 运行 浏览 器 的 操作 系统 平台 ,可 能 是 Windows 32、Windows 16、Mac68k、 
platform 


MacPPC 和 各 种 UNIX 
systemLanguage 返回 OS 使 用 的 默认 语言 
userLanguage 返回 OS 的 自然 语言 设置 
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2. navigator 对 象 方法 

javaEnabled() 方 法 ,规定 浏览 器 是 否 启用 Java。 

taintEnabled() 方 法 ,规定 浏览 器 是 否 启 用 数据 污点 (data tainting)。 污 点 将 避免 其 他 
脚本 传递 绝密 和 私有 的 信息 ,如 目录 结构 或 用 户 浏览 历史 。JavaScript 不 能 在 没有 最 终 用 
户 许可 的 情况 下 向 任何 服务 器 发 送 带 有 污点 的 值 。 可 以 使 用 taintEnabled 决定 是 否 人 允许 数 
据 污点 。 如 果 人 允许 数据 污点 ,taintEnabled 将 返回 True, 和 否则 返回 False。 用 户 可 以 通过 环 
境 变量 NS_ENABLE_TAINT 启用 或 禁用 数据 污点 。 

【 例 6-7】 关于 浏览 器 的 相关 信息 。 

第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-7. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<!DOCTYPE HTML > 
< HTML xmlns = "http://www.w3.org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title> about navigator </title> 
< script type = "text/javascript"> 
Var browser = navigator. appName; 
Var b_version = navigator. appVersion; 
var version= parseFloat(b_version); 
var codeName = navigator. appCodeName; 
Var cpu = navigator. cpuClass; 
document. write(" 浏 览 器 名 称 : " + browser); 
document. write("< br />"); 
document. write(" 浏 览 器 版 本 : " + version); 
document. write("< br />"); 
document. write(" 浏 览 器 代码 名 称 : " + codeName); 
document. write("< br />"); 
document. write(" 浏 览 器 系统 使 用 的 CPU 类 型 : " + cpu); 
document. write("< br />"); 
document. write("navigator. userAgent 的 值 是 " + navigator. userAgent); 
document. write("< br />"); 
if (navigator. taintEnabled( )) document. write(" 浏 览 器 启用 了 污点 数据 ") 
else document. write(" 浏 览 器 没有 启用 污点 数据 ") 
document. write("< br />"); 
if (navigator. javaEnabled( )) document. write(" 启 用 了 Java") 
else document. write(" 没 有 启用 Java") 
document. write("< br />"); 
if(navigator. plugins. length>0) { 
for(var i= 0;i<navigator.plugins. length;i++) { 
document. write(" 浏 览 器 中 有 插件 " + navigator. plugins[i].name); 


document. write("<br />"); 
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</script > 
</head> 
</HIML> 


第 2 步 ,运行 程序 ,得 到 如 图 6-7 所 示 的 结果 。 


6.2.3 





浏览 器 名 称 : Netscape 


浏 : 

浏览 器 代码 名 称 : Mozilla 

浏览 器 系统 使 用 的 CPU 类 型 : x86 

navigator.userAgent 的 信和 是 Mozilla/5.0 (Windows NT 6.1; WOW64; 
PC 6.0: InfoPath.3: .NET4.0C; NET4.0E; rv:11.0) like Gecko 
浏览 器 没有 启用 污点 数据 





location 对 和 象 


location 对 象 实际 上 是 JavaScript 对 象 ,而 不 是 HTML DOM 对 象 。location 对 象 是 由 
JavaScript runtime engine 自动 创建 的 ,包含 有 关 当 前 URL 的 信息 。location 对 象 的 属性 见 
表 6-4。location 对 象 的 方法 见 表 6-5 。 


表 6-4 location 对 象 的 属性 


























属 性 描 述 
a 设置 或 返回 从 井 号 (# ) 开 始 的 URL( 锚 ), 如 http://www. baidu. com/index. HTML # 
welcome 的 hash 是 “# welcome” 
host 设置 或 返回 主机 名 和 当前 URL 的 端口 号 
hostname | 设置 或 返回 当前 URL 的 主机 名 ,通常 等 于 host, 有 时 会 省 略 前 面 的 www 
设置 或 返回 完整 的 URL, 最 常用 的 属性 ,用 于 获取 或 设置 窗口 的 URL, 改 变 该 属性 ,就 可 以 
跳 转 到 新 的 页 面 
设置 或 返回 当前 URL 的 路 径 部 分 。URL 中 主机 名 之 后 的 部 分 ,例如 : http://www. 
pathname | baidu. com/ HTML/js/jsbasic/2010/0319/88. HTML 的 pathname 是 “/HTML/js/jsbasic/ 
2010/0319/88. HTML” 
设置 或 返回 当前 URL 的 端口 号 。 默 认 情 况 下 ,大 多 数 URL 没有 端口 信息 (默认 为 80 端 
Port 口 ), 所 以 该 属性 通常 是 空白 的 ,如 http://www. myw. com: 8080/index. HTML 这 样 的 
URL 的 port 属性 为 8080 
ed 设置 或 返回 当前 URL 的 协议 , 双 斜 杠 (//) 之 前 的 部 分 ,如 http://www. myw. com 中 的 
四 protocol 属性 等 于 http: ,ftp://www. myw. com 的 protocol 属性 等 于 ftp: 
设置 或 返回 从 问号 (?) 开 始 的 URL (查询 部 分 ), 如 http://www. myw. com/search. 


HTML? tern 一 sunchis 中 的 search 属性 为 ? term 一 sunchis 
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表 6-5 location 对 象 的 方法 


属 性 描 述 

assign() 加 载 新 的 文档 。assign() 方 法 可 以 通过 后 退 按钮 来 访问 上 一 个 页 面 

重新 加 载 当 前 文档 。reload() 方 法 有 两 种 模式 , 即 从 浏览 器 的 缓存 中 重 载 ,或 从 服务 器 端 重 
载 。 究 竟 采 用 哪 种 模式 由 该 方法 的 参数 决定 。 如 果 参 数 为 False, 从 缓存 中 重新 载 人 页 面 ; 
reload() 如 果 参 数 为 Tue, 从 服务 器 重新 载 人 页 面 ; 如 果 参 数 为 无 参数 ,从 缓存 中 载 和 页面; 如 果 参 
数 省 略 , 默 认 值 为 False。reload() 方 法 执行 后 ,其 后 面 的 代码 可 能 被 执行 ,也 可 能 不 被 执行 ， 
这 由 网 络 延迟 和 系统 资源 因素 决定 。 因 此 ,最 好 把 reload() 的 调用 放 在 代码 的 最 后 一 行 

用 新 的 文档 替换 当前 文档 。replace() 方 法 做 的 操作 与 assign() 方 法 一 样 ,但 它 多 了 一 步 操 
replace() | 作 , 即 从 浏览 器 的 历史 记录 中 删除 了 包含 脚本 的 页 面 , 这 样 就 不 能 通过 浏览 器 的 后 退 按钮 
和 前 进 按钮 来 访问 它 了 














location 对 象 存 储 在 window 对 象 的 location 属性 中 ,表示 那个 窗口 中 当前 显示 的 文档 
的 Web 地 址 。 它 的 href 属性 存放 的 是 文档 的 完整 URL, 其 他 属性 则 分 别 描述 了 URL 的 
各 个 部 分 。 这 些 属 性 与 anchor 对 象 (或 area 对 象 ) 的 URL 属性 非常 相似 。 当 一 个 location 
对 象 被 转换 成 字符 串 , href 属性 的 值 被 返回 。 这 意味 着 可 以 使 用 表达 式 location 来 蔡 代 
location. href。 不 过 ,anchor 对 象 表示 的 是 文档 中 的 超 链接 ,location 对 象 表示 的 却 是 浏览 
器 当前 显示 的 文档 的 URL( 或 位 置 ) 。 

但 是 ,location 对 象 所 能 做 的 远 远 不 止 这 些 , 它 还 能 控制 浏览 器 显示 的 文档 的 位 置 。 如 
果 把 一 个 含有 URL 的 字符 串 赋予 location 对 象 或 它 的 href 属性 ,浏览 器 就 会 把 新 的 URL 
所 指 的 文档 装载 进来 ,并 显示 。 除 了 设置 location 或 location. href 用 完整 的 URL 替换 当前 
的 URL 之 外 ,还 可 以 修改 部 分 URL, 只 需要 给 location 对 象 的 其 他 属性 赋值 即 可 。 这 样 做 
就 会 创建 新 的 URL, 其 中 一 部 分 与 原来 的 URL 不 同 ,浏览 器 会 将 它 装载 并 显示 出 来 。 例 
如 ,假设 设置 了 location 对 象 的 hash 属性 ,那么 浏览 器 就 会 转移 到 当前 文档 中 的 一 个 指定 
的 位 置 。 同 样 , 如 果 设置 了 search 属性 ,那么 浏览 器 就 会 重新 装载 附加 了 新 的 查询 字符 串 
的 URL。 

location 对 象 的 reload() 方 法 可 以 重新 装载 当前 文档 ,replace() 可 以 装载 一 个 新 文档 而 
无 须 为 它 创建 一 个 新 的 历史 记录 。 也 就 是 说 ,在 浏览 器 的 历史 列表 中 ,新 文档 将 替换 当前 文 
档 。 实 际 应 用 中 ,通常 使 用 location. reload() 或 者 history. go(0) 重 新 刷新 页 面 ,功能 与 客户 
端点 F5 刷新 页 面 一 样 。 但 是 .如 果 页 面 的 method 二 "post" ,由 于 Session 的 安全 保护 机 制 ， 
会 出 现 “ 网 页 过 期 "的 提示 。 当 调用 location. reload() 方 法 时 ,aspx 页 面 此 时 在 服务 端 内 存 
里 已 经 存在 ,因此 必定 是 IsPostback 的 。 如 果 和 希望 页 面 能 够 在 服务 端 重 新 被 创建 ,页 面 没 
有 IsPostback ,需要 重新 加 载 该 页 面 , 需 要 使 用 页 面 每 次 都 在 服务 端 重新 生成 的 location. 
replace (location。href) 完 成 。 刷 新 页 面 有 很 多 种 方法 : 

Window. location. reload( "http://www. qq. com" ); // 相 当 于 客户 端 单 击 F5(" 刷 新 ") 

Window. history. go(0); // 相 当 于 客户 端 单 击 F5(" 刷 新 ") 

Window. location. href = "http://www. qq. com"; 

Window. location.assign("http://www. qq. com" ); 


Window. location. replace( "http://www. qq. com" ); 
Window. navigate("http://www. qq. com" ); 


此 外 ,自动 刷新 页 面 的 方法 有 7 种 。 
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方法 1: 页 面 自动 刷新 : 把 如 下 代码 加 入 < head > 区 域 中 < Meta http-equiv 一 "refresh" 
content 一 "20">, 其 中 20 指 每 隔 20s 刷新 一 次 页 面 。 
方法 2: 页 面 自 动 跳 转 : 把 如 下 代码 加 入 < head > 区 域 中 < Meta http-equiv 一 "refresh" 
content 一 "20; url 一 http://www. jb51. net">, 隔 20s 后 跳 转 到 http://www. jb51. net 
页 面 。 
方法 3: 页 面 自动 刷新 JS 版 : 
< Script language = "JavaScript"> 
function myrefresh(){ 
window. location. reload( ); 
} 


setTimeout( 'myrefresh( )',1000); // 指 定 1s 刷新 一 次 
</script > 


方法 4: JS 刷新 框架 的 脚本 语句 


// 刷 新 包含 该 框架 的 页 面 用 

< Script language = JavaScript> 
parent, location. reload( ) 
</script> 


或 者 


< script language = "javascript"> 
window. opener. document. location. reload( ) 
</script > 


方法 5: // 子 窗口 刷新 父 窗口 


< script language = JavaScript > 
self. opener. location. reload( ); 
</script > 


或 者 
<a href = "javascript:opener. location. reload( )"> 刷 新 </a> 
方法 6: // 刷 新 另 一 个 框架 的 页 面 用 


< Script language = JavaScript> 
parent. 另 一 FrameID. location. reload(); 
</script > 方 


方法 7: 如 果 想 关闭 或 打开 窗口 时 刷新 ,在 < body > 中 调用 以 下 语句 即 可 。 


< body onload = "opener. location. reload( )"> 开 窗 时 刷新 

< body onUnload = "opener. location. reload( )"> 关闭 时 刷新 

【 例 6-8】 location 的 属性 及 其 应 用 。 

第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-8. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 
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<HIMDL> 
<head> 
<title > 不 能 访问 此 页 面 的 历史 页 面 </title> 
</head> 
< body> 
< > 测试 一 下 效果 ,请 等 待 一 秒 钟 …-</p> 
<p> 然 后 单 击 浏览 器 中 的 "后 退 " 按 钮 ,你 会 发 现 什么 ?</p> 
< script type = "text/javascript"> 
setTimeout( 
function() { 
location. replace( "http://www. baidu. com"); 
},1000); 
</script > 
</body> 
</HIML> 


第 2 步 ,运行 程序 ,得 到 如 图 6-8 所 示 的 结果 ,等 1s 后 转 入 百度 首页 。 

【 例 6-9】 location 的 属性 及 其 应 用 。 

第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-9. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


< script type = "text/javascript"> 

document. write("hash:" + location, hash + "<br>"+ 

"host:" + location. host + "<br>"+ 

"hostname:" + location. hostname + "< br >" + 

"href:" + location. href + "<br>"+ 

"pathname:" + location. pathname + "<br >"+ 

"port:" + location. port + "<br>"+ 

"protocol:" + location. protocol + "<br >"+ 
"search:" + location. search); 

</script > 


第 2 步 ,运行 程序 ,得 到 如 图 6-9 所 示 的 结果 。 


hash: 

host:localhost:64525 

hostname :localhost 
href:http://localhost:64525/Ex6-9, html 


测试 一 下 浆果， 请 等 待 一 秒 钟 …… errr Bem 
然后 单 击 浏览 器 中 的 “后 退 ” 按 钮 ， 你 会 败 现 什么 ? tp: 
图 6-8 程序 运行 结果 图 6-9 程序 运行 结果 


6.2.4 history 对 象 


history 对 象 实际 上 是 JavaScript 对 象 ,由 JavaScript runtime engine 自动 创建 ,由 一 系 
列 用 户 在 一 个 浏览 器 窗口 内 已 访问 的 URL 组 成 。history 对 象 最 初 用 来 表示 窗口 的 浏览 历 
史 , 但 出 于 隐私 方面 的 原因 ,history 对 象 不 再 允许 脚本 访问 已 经 访问 过 的 实际 URL。 唯 一 
保持 使 用 的 功能 只 有 back() 、forward() 和 go() 方 法 。history 对 象 是 window 对 象 的 一 部 
分 ,可 通过 window. history 属性 对 其 进行 访问 。 
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history 对 象 





history 对 象 的 常用 方法 见 表 6-6 。 
表 6-6 history 对 象 的 常用 方法 


属性 中 只 有 Length 返回 浏览 器 历史 列表 中 的 URL 数量 。 














方 法 描 述 

back() 加 载 history 列表 中 的 前 一 个 URL 
forward() 加 载 history 列表 中 的 下 一 个 URL 
goO) 加 载 history 列表 中 的 某 个 具体 页 面 


【 例 6-10】 history 对 象 示例 。 
第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-10. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HITML > 
<head> 


<title> history 对 象 示例 </title> 


</head> 
<body> 
<ul> 


<1i onclick = "history.go( -1)"> 后 退 一 页 </1i> 


<1i onclick = "history.go(1)"> 前 进 一 页 </1i> 


</ul> 


<a onClick = "history. back()"><u> 上 一 页 </u></a> 
<a onClick = "history. forward()"><u> 下 一 页 </u></a> 


</body> 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 6-10 所 示 的 结果 。 
6.2.5 event 对 象 


event 对 象 代表 事件 的 状态 ,例如 事件 在 其 中 发 生 的 元 素 、 键 盘 按 键 的 状态 .鼠标 的 位 置 、 
鼠标 按钮 的 状态 。 事 件 通常 与 函数 结合 使 用 ,函数 不 会 在 事件 发 生前 被 执行 。event 对 象 只 在 
事件 发 生 的 过 程 中 才 有 效 。event 的 某 些 属性 只 对 特定 的 事件 有 意义 。 例 如 ,fromElement 和 
toElement 属性 只 对 onmouseover 和 onmouseonut 事件 有 意义 。 

HTML 4.0 的 新 特性 之 一 是 能 够 使 HTML 事件 触发 浏览 器 中 的 行为 ,例如 当 用 户 单 击 某 
个 HTML 元 素 时 启动 一 段 JavaScript, 具 体 事件 见 表 6-7。event 的 鼠标 和 键盘 属性 见 表 6-8。 
表 6-7 event 的 事件 表 


“后退 一 页 
"前 进 一 页 
上 一 页 下 一 页 





图 6-10 程序 运行 结果 
































事 件 此 事件 发 生 在 何 时 事 件 此 事件 发 生 在 何 时 
onabort 图 像 的 加 载 被 中 断 onfocus 元 素 获得 焦点 
onblur 元 素 失去 焦点 onkeydown 某 个 键盘 按键 被 按 下 
onchange 域 的 内 容 被 改变 onkeypress 某 个 键盘 按键 被 按 下 并 松 开 
onclick 当 用 户 单 击 某 个 对 象 时 调用 的 事件 句柄 | onkeyup 某 个 键盘 按键 被 松 开 
ondblclick ”| 当 用 户 双 击 某 个 对 象 时 调用 的 事件 句柄 | onload 一 张 页 面 或 一 幅 图 像 完成 加 载 
onerror 在 加 载 文档 或 图 像 时 发 生 错 误 onmousedown | 鼠标 按钮 被 按 下 
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续 表 
事 件 此 事件 发 生 在 何 时 事 件 此 事件 发 生 在 何 时 
onmousemove 鼠标 被 移动 onresize 窗口 或 框架 被 重新 调整 大 小 
onmouseout 鼠标 从 某 元 素 移 开 onselect 文本 被 选中 
onmouseover 鼠标 移 到 某 元 素 之 上 onsubmit 确认 按钮 被 单 击 
onmouseup 鼠标 按键 被 松 开 onunload 用 户 退 出 页 面 
Onreset 重 置 按钮 被 单 击 
表 6-8 event 的 鼠标 和 键盘 属性 
属 性 描 述 
altKey 当 事 件 被 触发 时 ,判断 Alt 键 是 否 被 按 下 。 当 Alt 键 按 下 时 , 值 为 True, 否 则 为 False 
当 事 件 被 触发 时 ,判断 Ctrl 键 是 否 被 按 下 。 当 Ctrl 键 按 下 时 , 值 为 True, 和 否则 为 False， 
ctrlKey 
只 读 属 性 
MetaKey 当 事 件 被 触发 时 ,判断 Meta 键 是 否 被 按 下 ,Windows 下 就 是 那个 window 图 标的 键 
shiftKey 当 事 件 被 触发 时 ,判断 Shift 键 是 否 被 按 下 
当 事 件 被 触发 时 ,判断 哪个 鼠标 按钮 被 单 击 。 可 能 的 值 : 
ee 0, 没 按键 ;1, 按 左 键 ;2, 按 右键 ; 3, 按 左右 键 ;4, 按 中 间 键 ;5, 按 左 键 和 中 间 键 ;6, 按 右键 
和 中 间 键 ; 7, 按 所 有 键 。 这 个 属性 仅 用 于 onmousedown,onmouseup 和 onmousemove 事 
件 。 对 其 他 事件 ,不 管 鼠 标 状态 如 何 ,都 返回 0( 如 onclick) 
clientX 返回 当 事 件 被 触发 时 ,鼠标 指针 相对 于 浏览 器 文档 窗口 的 水 平 坐 标 
clientY 返回 当 事 件 被 触发 时 ,鼠标 指针 相对 于 浏览 器 窗口 可 视 文 档 区 域 的 垂直 坐标 
screenX 返回 当 某 个 事件 被 触发 时 ,鼠标 指针 相对 于 显示 器 左上 角 的 水 平 坐标 
ScreenY 返回 当 某 个 事件 被 触发 时 ,鼠标 指针 相对 于 显示 器 左上 角 的 垂直 坐标 
offsetX 检查 相对 于 触发 事件 的 对 象 ,鼠标 相对 于 源 元 素 左 上 角 位 置 的 水 平 坐标 
offsetY 检查 相对 于 触发 事件 的 对 象 ,鼠标 相对 于 源 元 素 左 上 角 位 置 的 垂直 坐标 





返回 鼠标 相对 于 CSS 属性 中 有 position 属性 的 上 级 元 素 的 xz 轴 坐 标 。 如 果 没 有 CSS 属 
性 中 有 position 属性 的 上 级 元 素 ,默认 以 BODY 元 素 作 为 参考 对 象 。 如 果 事 件 触 发 后 ， 
鼠标 移出 窗口 外 , 则 返回 的 值 为 一 1 





Ea 


返回 鼠标 相对 于 CSS 属性 中 有 position 属性 的 上 级 元 素 的 y 轴 坐 标 。 如 果 没 有 CSS 属 
性 中 有 position 属性 的 上 级 元 素 ,默认 以 BODY 元 素 作为 参考 对 象 。 如 果 事 件 触发 后 ， 
鼠标 移出 窗口 外 , 则 返回 的 值 为 一 1 





fromElement 


检测 onmouseover 和 onmouseout 事件 发 生 时 ,鼠标 离开 的 元 素 














toElement 检测 onmouseover 和 onmouseout 事件 发 生 时 ,鼠标 进入 的 元 素 
relatedTarget | 返回 与 事件 的 目标 结 点 相关 的 结 点 

cancelBubble | 设置 或 获取 当前 事件 是 否 要 在 事件 句柄 中 向 上 冒 泡 
srcElement 返回 触发 事件 的 元 素 





srcFilter 





返回 触发 onfilterchange 事件 的 滤 镜 


clientX/clientY: 事件 发 生 的 时 候 , 鼠 标 相 对 于 浏览 器 窗口 可 视 文 档 区 域 的 左上 角 的 位 
置 (在 DOM 标准 中 ,这 两 个 属性 值 都 不 考虑 文档 的 滚动 情况 ,也 就 是 说 ,无 论文 档 滚动 到 哪 
里 ,只 要 事件 发 生 在 窗口 左上 角 ,clientX 和 clientY 都 是 0, 所 以 在 IE 中 ,要 想得到 事件 发 生 
的 坐标 相对 于 文档 开头 的 位 置 , 要 加 上 document. body. scrollLeft 和 document. body. 


scrollTop) 。 
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offsetX ,offsetY/layerX,layerY: 事件 发 生 时 ,鼠标 相对 于 源 元 素 左上 角 的 位 置 。 

x,y/pageX,pageY: 检索 相对 于 父 要 素 鼠 标 水 平 坐标 的 整数 。 

screenX screenY: 鼠标 指针 相对 于 显示 器 左上 角 的 位 置 ,如 果 打 开 新 的 窗口 ,这 两 个 
属性 很 重要 。 

【 例 6-11】 检查 鼠标 是 否 在 链接 上 单 击 , 并 且 如 果 Shift 键 被 按 下 ,就 取消 链接 的 跳 
转 。 在 状态 栏 上 显示 鼠标 的 当前 位 置 。 

第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-11. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HIML> 

<HEAD> 

< TITLE> Cancels Links </TITLE > 

< SCRIPT LANGUAGE = "JScript"> 

function cancelLink() { 

if(window. event. srcElement. tagName == "A" && window. event. shiftKey) 
window, event. returnValue = false; 

} 

</HEAD> 

</SCRIPT > 

< BODY onclick = "cancelLink()" onmousemove = "window. status = 'X="'+ window.event.x +'Y=" 
+ window.event.y"> 

<a href = "http://www. baidu. com"> 我 是 超级 链接 </a> 

</body> 

</HTML > 


第 2 步 ,运行 程序 ,结果 为 : 我 是 超级 链接 , 单 击 后 跳 转 至 百度 首页 。 

【 例 6-12】 下 面 的 代码 片断 演示 了 当 在 图 片上 单 击 Conclick) 时 ,如 果 同 时 Shift 键 也 
被 按 下 ,就 取消 上 层 元 素 (body) 上 的 事件 onclick 引发 的 showSrc() 函 数 。 

第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-12. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HTML> 

<head> 

< SCRIPT LANGUAGE = "JScript"> 

function checkCancel() { 

if (window. event. shiftKey) 

Window. event. cancelBubble = true; 

} 

function showSrc() { 

if (window. event. srcElement. tagName == "IMG") 
alert(window. event. srcElement. src); 

} 

</SCRIPT > 

</head> 

< BODY onclick = "showSrc( )"> 

< IMG onclick = "checkCancel()" src = "images/jiao.gif"> 
</body> 

</HTML > 
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第 2 步 , 运 行程 序 , 得 到 一 个 小 图 标 。 单 击 此 图 





标 , 弹 出 如 图 6-11 所 示 的 对 话 框 。 人 hpiocalhosts4525/imagesliaogit 
【 例 6-13】 使 用 srcElement 属性 ,判断 鼠标 单 

击 了 哪个 元 素 。 
第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 

新 项 ,命名 为 Ex6-13. HTML, 设 置 为 起 始 页 ,添加 图 6-11 程序 结果 

代码 : 
<HITML > 
< head> 
<title > srcElement 演示 </title> 
</head> 


< body bgcolor = #FFFFCC > 
<UL ID = oUL onclick = "fnGetTags()" style= "cursor:hand"> 
<LI> Item 1 
<UL> 
<LI> Sub Item 1.1 
<OL> 
<LI> Super Sub Item 1.1 
<LI> Super Sub Item 1.2 
</OL> 
<LI> Sub Item 1.2 
<LI> Sub Item 1.3 
</UL> 
<LI> Item 2 
<UL> 
<LI> Sub Item 2.1 
<LI> Sub Item 2.3 
</UL> 
<LI> Item3 
</UL> 
< SCRIPT LANGUAGE = "JavaScript"> 
function fnGetTags(){ 
var oWorkItem = event. srcElement;  // 获 取 被 鼠标 单 击 了 的 对 象 
alert(oWorkItem. innerText); 
} // 显 示 该 对 象 包含 的 文本 
</SCRIPT > 
</body> 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 6-12 所 示 的 结果 , 单 击 Sub Item 1.1, 得 到 如 图 6-13 所 示 


”Item 1 
”Sub Item 1.1 
1. Super Sub Item 1.1 
2. Super Sub Item 1.2 
= Sub Item 1.2 
» Sub Item 1.3 
”Item 2 
=。 Sub Item 2.1 
» Sub Item 2.3 


“Iten 3 


图 6-12 程序 结果 图 6-13 程序 结果 





Sub em 1.1 Super Sub ltem 1.1 
Super Sub Hem 1.2 
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6.2.6 document 对 和 象 


document 文档 对 象 是 浏览 器 对 象 的 核心 ,主要 作用 是 把 基本 的 HTML 元 素 作为 对 象 
封装 起 来 ,编程 人 员 可 以 从 脚本 中 对 HTML 页 面 中 的 所 有 元 素 进行 访问 ,可 以 对 WWW 浏 
览 器 环境 中 的 事件 进行 控制 并 处 理 。document 对 象 对 实现 Web 页 面 信息 交互 起 关键 作 
用 。document 对 象 是 window 对 象 的 一 部 分 ,可 通过 window. document 属性 对 其 进行 访 
问 。document 对 象 集合 见 表 6-9 。 

表 6-9 document 对 象 集合 
集 合 描 述 
提供 对 文档 中 所 有 HTML 元 素 的 访问 。all[ ] 已 经 被 document 接口 的 标准 的 getElementById() 
方法 .getElementsByTagName() 方 法 以 及 document 对 象 的 getElementsByName() 方 法 所 取代 。 
尽管 如 此 ,这 个 allL] 数 组 在 已 有 的 代码 中 仍然 使 用 ,使 用 方法 如 下 : 


document. all[ 订 





all[] 


document. all[name] 

document. all. tags[tagname] 
anchors[] | 返回 对 文档 中 所 有 anchor 对 象 的 引用 
applets 返回 对 文档 中 所 有 applet 对 象 的 引用 
返回 对 文档 中 所 有 form 对 象 的 引用 














document. form s // 对 应 页 面 上 的 form 标签 
document. form s. length // 对 应 页 面 上 /form form 标签 的 个 数 
document. form s[0] // 第 1 个 /form form 标签 
document. form s[i] // 第 i 一 1 个 /form form 标签 

forms[] document. form s[i]. length // 第 i 一 1 个 /form form 中 的 控件 数 
document. form s[i]. elements[j] // 第 i 一 1 个 /form form 中 第 j 一 1 个 控件 
document. form s[i]. name // 对 应 form name > 属性 
document. form s[i]. action // 对 应 /form form action > 属性 
document. form s[i]. encoding // 对 应 /form form encoding > 属性 
document. form s[i]. target // 对 应 /form form target > 属性 
返回 对 文档 中 所 有 Image 对 象 的 引用 
document. images // 对 应 页 面 上 的 img 标签 

images[] document. images. length // 对 应 页 面 上 img 标签 的 个 数 
document. images[0] // 第 1 个 img 标签 
document. images[i] // 第 i 一 1 个 img 标签 








links[] 返回 对 文档 中 所 有 Area 和 link 对 象 的 引用 


【 例 6-14】 anchors 对 象 集合 的 应 用 。 
第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-14. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HIML > 

<body> 

<a name= "first"> First anchor </a><br /> 
<a name = "second"> Second anchor </a><br /> 
<a name = "third"> Third anchor </a><br /> 
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<br /> 

Number of anchors in this document: 

< script type = "text/javascript"> 

document. write( document. anchors. length) First anchor 


VR 证 
</body> 


</HTML> 


第 2 步 ,运行 程序 ,得 到 如 图 6-14 所 示 的 结果 。 

【 例 6-1S】 forms 和 links 集合 对 象 的 应 用 。 

第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-15. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HTML> 

<body> 

< form name = "form1l"> 

<a href = "http://www. dreamdu. com/xHTML/" name = "al"> xHTML </a> 
</form > 

<form name= "form2"> 

<a href = "http://www. dreamdu. com/CSS/" name = "a2"> CSS </a> 
</form > 

< form name = "form3"> 


Number of anchors in this document: 3 


图 6-14 所 示 的 结果 


<a href = "http://www. dreamdu. com/javascript/" name = "a3"> javascript </a> 

</form > 

< input type = "button" value = "显示 第 二 个 表单 的 名 称 " onclick = "alert (document. form s[1]. 
name)" /> 

< input type = "button" value = "显示 第 二 个 表单 的 名 称 第 二 种 方法 " onclick = "alert (document. 
form s[ 'form 2']. name)" /> 

< input type = "button" value = "显示 第 三 个 链接 的 名 称 " onclick = "alert (document. links[2]. 
name)" /> 

< input type = "button" value = "显示 第 三 个 链接 href 属性 的 值 " onclick = "alert(document. links 
[2].href)" /> 

</body> 

</HTML> 


第 2 步 ,运行 程序 ,得 到 如 图 6-15 所 示 的 结果 。 
Xhtml 
iavascript 


显示 第 二 个 表单 的 名 称 | | 显示 第 二 个 表单 的 名 称 第 二 种 方法 | | 显示 第 三 个 链接 的 名 称 | | 显示 第 三 个 链接 href 属 性 的 值 





6-15 程序 结果 


document 对 象 属性 见 表 6-10。Cookie 是 放 在 浏览 器 缓存 中 的 一 个 文件 ,里 面 存放 着 
各 个 参数 名 以 及 对 应 的 参数 值 。Cookie 中 的 参数 是 以 分 号 相隔 的 ,如 “name 一 20;sex 一 
male;color 二 red;expires 二 Sun May 27 22:04:25 UTC 十 0800 2008”。 用 户 在 打开 同一 个 
网 站 时 ,通过 链接 方式 可 能 打开 了 多 个 浏览 器 窗口 ,这 些 窗口 间 需 要 共享 信息 时 ,Cookie 就 
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可 以 完成 这 项 工作 。Cookie 存放 的 内 容 可 以 设置 失效 期 限 , 既 可 以 永久 保留 ,也 可 以 关闭 
网 站 后 删除 ,还 可 以 在 指定 时 间 内 失效 ,通过 expires 指定 Cookie 的 失效 日 期 , 当 没 有 失效 
日 期 时 ,关闭 浏览 器 即 失效 。 将 用 户 输入 的 参数 保存 到 Cookie 中 ,以 后 可 以 恢复 显示 。 


表 6-10 ”document 对 象 属性 
属 性 描 述 
提供 对 < body > 元 素 的 直接 访问 ,对 于 定义 了 框架 集 的 文档 ,该 属性 引用 最 外 层 的 


< frameset >。 

document. body // 指 定 文档 主体 的 开始 和 结束 等 价 于 < body >…</body > 
document. body. bgColor // 设 置 或 获取 对 象 后 面 的 背景 颜色 

document. body. link // 未 单 击 过 的 链接 颜色 

document. body. alink // 激 活 链接 (焦点 在 此 链接 上 ) 的 颜色 

document. body. vlink 。” // 已 点 击 过 的 链接 颜色 

document. body. text // 文 本 色 


























body document. body. innerText // 设 置 < body >…</body > 之 间 的 文本 
document. body. innerHTML // 设 置 < body >…</body > 之 间 的 HTML 代码 
document. body. topMargin // 页 面 上 边 距 
document. body. leftMargin // 页 面 左边 距 
document. body. right Margin // 页 面 右 边 距 
document. body. bottomMargin // 页 面 下 边 距 
document. body. background // 背 景 图 片 
document. body. appendChild(oTag) // 向 结 点 的 子 结 点 列表 的 末尾 添加 新 的 子 结 点 ， 

//oTag 为 新 添加 的 结 点 

adikie 设置 或 返回 与 当前 文档 有 关 的 所 有 Cookie。 该 属性 是 一 个 可 读 、 可 写 的 字符 串 , 可 使 用 
该 属性 对 当前 文档 的 Cookie 进行 读 取 、 创 建 、 修 改 和 删除 操作 

domain 返回 当前 文档 的 域名 

lastModified | 返回 最 后 修改 文档 的 日 期 和 时 间 

referrer 返回 载 人 当前 文档 的 URL 

title 返回 当前 文档 的 标题 

URL 返回 当前 文档 的 URL 


【 例 6-16】 Cookie 的 读 写 应 用 。 
第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-16. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HIML> 
<HEAD> 
< TITLE > First Document cookie </TITLE > 
< script type = "text/javascript"> 
function getCookie( sName) // 从 cookie 中 获取 参数 name 的 值 
{ // cookie 中 的 参数 是 以 分 号 相隔 的 , 如 "name = 20; sex = male;color = red;" 
Var aCookie = document. cookie. split("; "); 
for (var i=0; i< aCookie. length; i++) 
{ // 对 存放 在 数组 acookie 中 的 每 一 个 "参数 名 = 参数 值 "进行 循环 ,找到 要 获取 参数 值 的 参数 名 
var aCrumb = aCookie[i].split("="); 
if (sName == aCrumb[0]) 
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return unescape(aCrumb[1]); // 如 果 找 到 , 则 返回 参数 值 


return null; 


} 


// Cookie 中 请 求 的 参数 名 不 存在 时 ,返回 nul1 


// name 一 参数 ,value 一 参数 值 , expires 一 失效 日 期 
// 功 能 : 将 参数 name 的 值 value 和 失效 日 期 expires 写 和 一 个 Cookie 中 


function setCookie(name, value, expires){ 


var expStr = ( (expires == null) ? "": ("; expires=" + expires) ); 


window. document. cookie = name+ "=" + escape(value) + expStr; 


} 
</script > 
</HEAD> 


< BODY bgcolor = #FFFFCC> 

< Input id = "yourName" type = "text" value = "Tim"> 

< Input type = "button"” value = "姓名 保存 到 Cookie" onclick = " setCookie( 'name', yourName. 
value, 'Sun May 27 22:04:25 UTC + 0800 2008"');"> 


< Input id = "GetName" type = "text" value = ""> 
< Input type = "button" value = "从 Cookie 中 得 到 姓名 " onclick = "GetName. value = getCookie( 'name');"> 


</BODY > 
</HTML > 


第 2 步 ,运行 程序 ,得 到 如 图 6-16 所 示 的 结果 。 





Tim 











[站 名 保存 到 cookie | Fi [从 cookie 中 网 到 姓名 | 
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document 对 象 方法 见 表 6-11。 


方法 


表 6-11 document 对 象 方法 
描 述 





close() 


关闭 用 document. open() 方 法 打开 的 输出 流 ,并 显示 选 定 的 数据 





getElementById() 


返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 





getElementsByName() 


返回 带 有 指定 名 称 的 对 象 集合 





getElementsByTagName() 


返回 带 有 指定 标签 名 的 对 象 集合 





打开 一 个 流 ,以 收集 来 自任 何 document. write() 或 document. writeln() 方 








open() 法 的 输出 

write() 向 文档 写 HTML 表达 式 或 JavaScript 代码 ,在 文档 载 和 人 和 解析 的 时 候 , 它 
允许 一 个 脚本 向 文档 中 插入 动态 生成 的 内 容 

wilaty 等 同 于 write() 方 法 ,不 同 的 是 ,WriteIn() 方 法 会 在 每 个 表达 式 之 后 写 一 个 





换行 符 


【 例 6-17】 单 击 按钮 ,页 面 内 容 会 被 替换 。 查 看 网 页 源 代码 ,依然 是 原来 的 。 
第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-17. HTML ,设置 为 起 


始 页 ,添加 如 下 代码 : 


<HIML> 
<head> 
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< script type = "text/javascript"> 

function createNewDoc() 

|! 
var new_doc = document. open("text/HIML","replace"); 
var txt = "< HTML>< body> 这 是 新 的 文档 </body></HIML >"; 
new_doc. write(txt); 
new_doc. close( ); 

</script> 

</head> 

<body> 

<button onclick = "createNewDoc()"> 单 击 写 人 新 文档 </button > 

</body> 

</HTML> 


第 2 步 ,运行 程序 ,出 现 * 单 击 写 人 新 文档 ”的 按钮 , 单 击 此 按钮 ,出现 : 这 是 新 的 文档 。 


6.3 基于 DOM 的 HTML 元 素 操作 


在 HTML DOM 中 ,打开 的 浏览 器 窗口 可 看 成 window 对 象 ,浏览 器 显示 页 面 的 区 域 可 
看 成 document 对 象 , 各 种 HTML 元 素 就 是 document 的 子 对 象 。 


6.3.1 访问 根 元 素 


DOM 把 层次 中 的 每 一 个 对 象 都 称 为 结 点 ,就 是 一 个 层次 结构 ,可 以 理解 为 一 个 树 形 结 
构 , 就 像 目录 一 样 。 一 个 根 目录 , 根 目 录 下 有 子 目录 , 子 目 录 下 还 有 子 目录 。 

有 两 种 特殊 的 文档 属性 可 用 来 访问 根 元 素 : document. documentElement, 可 返回 存在 
于 XML 以 及 HTML 文档 中 的 文档 根 元 素 ; document. body, 对 HTML 页 面 的 特殊 扩展 ， 
提供 了 对 < body > 标签 的 直接 访问 。 以 HTML 为 例 ,整个 文档 的 一 个 根 就 是 ,在 DOM 中 可 
以 使 用 document. documentElement 来 访问 它 , 它 就 是 整个 结 点 树 的 根 结 点 。 而 body 是 子 
结 点 ,要 访问 到 body 标签 ,在 脚本 中 应 该 写 : document. body。 也 就 是 说 ,body 是 DOM 对 
象 里 的 body 子 结 点 , 即 < body > 标签 ; documentElement 是 整个 结 点 树 的 根 结 点 root, 即 
< HTML> 标 签 。 

document . body 有 以 下 几 个 重要 属性 : 

document . body. clientWidth ,网 页 可 见 区 域 宽 ; 

document . body. clientHeight, 网 页 可 见 区 域 高 ; 

document . body. offsetWidth ,网 页 可 见 区 域 宽 ,包括 边线 的 宽 ; 

document . body. offsetHeight, 网 页 可 见 区 域 高 ,包括 边线 的 高 ; 

document . body. scrollWidth, 网 页 正文 全 文 宽 ; 

document . body. scrollHeight, 网 页 正文 全 文 高 ; 

document . body. scrollTop ,设置 或 获取 位 于 对 象 最 顶端 和 窗口 中 可 见 内 容 的 最 顶端 
之 间 的 距离 ; 

document . body. scrollLeft, 设 置 或 获取 位 于 对 象 左 边界 和 窗口 中 目前 可 见 内 容 的 最 
左 端 之 间 的 距离 。 
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例 6-18】 文档 的 根 结 点 和 body 结 点 访问 。 


第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-18. HTML ,设置 为 起 


始 页 ， 


< 
< 
< 
< 


添加 如 下 代码 : 


HTML xmlns = "http://www.w3.org/1999/xHTML"> 
head > 

title > about the root node </title> 

script type = "text/javascript"> 


function shownode() { 


// 根 结 点 


Var oHTML = document. documentElement; 

alert(" 文 档 根 结 点 的 名 称 : " + oHTML. nodeName); 

alert(" 文 档 根 结 点 的 长 度 : "+ oHTML. childNodes. length); 

// body 结 点 

Var obody = document. body; 

alert("body 是 子 结 点 的 名 称 : " + obody. nodeName); 

alert("body 是 子 结 点 的 长 度 : " + obody. childNodes. length); 

// head 结 点 

var ohead = oHTML. childNodes[0]; 

alert("head 子 结 点 的 下 一 个 兄弟 结 点 名 称 : ”+ ohead. nextSibling. nodeName); 
} 


</script > 
</head> 


< 


body> 
<div id= "div1"> 第 一 个 </div> 
<div id= "div2"> 第 二 个 </div> 
< div> 第 三 个 < img src = "images/jiao.gif" /> </div> 
<div> 第 四 个 < input id = "Button1”type = "button" value = "显示 结 点 "onclick = "shownode 


();"/></div> 

</body> 

</HTML> 第 一 个 
第 二 个 

第 2 步 ,运行 程序 ,出 现 如 图 6-17 所 示 的 界面 , 单 击 * 显 示 结 点 " 按 。 多加 


钮 ,分 
“body 


别 出 现 ;“ 文 档 根 结 点 的 名 称 : HTML”“ 文 档 根 结 点 的 长 度 : 3” ”第 四 个 [a 二] 
是 子 结 点 的 名 称 : BODY”“body 是 子 结 点 的 长 度 : 9”“head 子 图 6-17 程序 界面 


结 点 的 下 一 个 兄弟 结 点 名 称 : # text”。 


6.3. 


2 访问 指定 ID 属性 的 元 素 


对 HTML 元 素 进行 操控 ,必须 为 元 素 设置 ID 属性 或 Name 属性 。 可 以 把 某 HTML 
元 素 的 ID 属性 看 成 该 控件 的 名 称 ,DOM 中 通过 ID 属性 或 Name 属性 来 操控 HTML 元 


素 。 如 





例如 : 


E 议 全 部 用 ID 属性 ,而 不 用 Name 属性 。Name 属性 只 是 为 了 兼容 低 版 本 浏览 器 。 


指定 ID 属性 : < input id 二 "myColor" type 二 "text" value 一 "red"> 
指定 Name 属性 : < input name 王 "myColor" type 二 "text" value 一 "red"> 


HTML DOM 中 提供 了 统一 访问 HTML 元 素 的 方法 ,它们 的 格式 如 下 : 





window. document. all. item("HTML 元 素 的 ID") 
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例如 : 


window. document.al1. item( "myColor") 
window. document. all. HTML 元 素 的 ID 


例如 : 


window. document. all. myColor 
window. document. getElementByld( "HTML 元 素 的 ID") 


例如 : 


window. document. getElementByld( "myColor") 
window. document. getElementName( "HTML 元 素 的 Name 属性 值 ") 


例如 : 





window. document. getElementName( "firstName") 
window. document. all. namedItem("HTML 元 素 的 Id 或 Name 属性 值 ") 


例如 : 


window, document. all. namedItem("myColor") 
window, document. getElementsByTagName("div")("HTML 标记 名 称 ") 


例如 : 
window. document. getElementsByTagName( "div") 


getElementsByTagName 方法 可 实现 当 标记 在 没有 定义 ID 或 Name 属性 的 情况 下 , 仍 
然 可 以 被 访问 。 


window. document. getElementsByClassName(classname) 
例如 : 
var x= document. getElementsByClassName( "example color"); 


【 例 6-19】 动态 改变 浏览 器 背景 颜色 和 浏览 器 窗口 标题 。 
第 1 步 , 为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-19. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


< HITML > 
<head><title> </title> 
</head> 
<body> 
< input id = "myColor" type = "text" value= "red" > 
< input id = "mybut1" type = "button" value = "改变 页 面 背 景 颜色 "> 
< input id= "myTitle" type = "text" value= "新 的 窗口 标题 " > 
< input id = "mybut2"” type = "button" value = "改变 浏览 器 窗口 标题 "> 
< script language = "javascript"> 
window. mybut1. onmousedowmn = function() { 
window. document. bgColor = window.myColor.value :; 
} 


window. mybut2. onmousedown = function() { 





188 2 web 系统 与 技术 





window. document. title = window. myTitle. value; 

} 

</script > 

</body> 

</HIML > 

第 2 步 ,运行 程序 ,出 现 如 图 6-18 所 示 的 界面 , 单 击 “改变 页 面 背景 颜色 ”按钮 ,背景 就 
变 成 红色 ,在 新 窗口 中 的 标题 文本 框 中 输入 内 容 , 单 击 浏览 器 窗口 标题 ,将 显示 新 的 标题 
名 称 。 





red 改 杰 页 面 背 景 颜色 | [新 的 百 口 标题 ] | 改变 浏览 器 窗口 标题 


























6-18 程序 界面 


6.3.3 访问 结 点 属性 


JavaScript 对 HTML 元 素 对 象 进 行 访问 ,编程 接口 则 是 对 象 方法 和 对 象 属性 。 对 象 方 
法 是 能 够 执行 的 动作 ,如 添加 或 修改 元 素 。 对 象 属性 是 能 够 获取 或 设置 的 值 , 如 结 点 的 名 称 
或 内 容 。 

1) innerHTML 属性 

innerHTML 属性 用 于 设置 或 返回 指定 标签 之 间 的 HTML 内 容 。innerHTML 属性 对 
于 获取 或 替换 HTML 元 素 的 内 容 很 有 用 。 

【 话 法 】 

Object. innerHTML = "HTML"; // 设置 

var HTML = Object. innerHTML; // 获取 

2) nodeName 属性 

nodeName 是 只 读 的 属性 ,规定 结 点 的 名 称 。 元 素 结 点 的 nodeName 与 标签 名 相同 , 属 
性 结 点 的 nodeName 与 属性 名 相同 。 文 本 结 点 的 nodeName 始终 是 # text, 文 档 结 点 的 
nodeName 始终 是 # document。 

3) nodeValue 属性 

nodeValue 属性 规定 结 点 的 值 。 元 素 结 点 的 nodeValue 是 undefined 或 null, 文 本 结 点 
的 nodeValue 是 文本 本 身 , 属 性 结 点 的 nodeValue 是 属性 值 。 

4) nodeType 属性 

nodeType 属性 返回 结 点 的 类 型 。nodeType 是 只 读 的 。 比 较 重 要 的 元 素 类 型 有 元 素 、 
属性 ,文本 注释 ,文档 ,对 应 的 结 点 类 型 分 别 为 1.2.3.8 和 9。 

【 例 6-20】 获取 指定 标签 的 HTML 代码 。 

第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-20. HTML, 设 置 为 起 
始 页 ,添加 如 下 代码 : 


< HIML > 
<head > 
< script type = "text/javascript"> 
function getInnerHTML(){ 
alert(document. getElementById("test"). innerHTML); 
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} 
</script > 
</head> 
<body> 
<p id= "test"> 
< font color ="# 000"> 了 畴 豆 壳 www. hi -docs. com </font > 
</p> 
< input type = "button" onclick = "getInnerHTML()" value = "点 击 " > 
</body> 
</HTML> 


第 2 步 , 运 行程 序 , 单 击 “ 点 击 ” 按 钮 ,出 现 如 图 6-19 所 示 的 结果 。 


路 豆 壳 www. hi-docs. com 








点 击 











来 自 网 页 的 消息 





全 <font color="#000"> 咕 豆 故 www.hi-docs.com</font> 











6-19 程序 结果 


【 例 6-21】 设置 段落 p 的 innerHTMLCHTML 内 容 ) 。 
第 1 步 ,为 项 目 DomWebsite 添加 一 个 HTML 新 项 ,命名 为 Ex6-21. HTML ,设置 为 起 
始 页 ,添加 如 下 代码 : 


<HIML> 
<head> 
< script type = "text/javascript"> 
function setInnerHTML( ){ 
document. getElementById("test"). innerHTML = "< strong > 设置 标签 的 HTML 内 容 </strong >"; 
} 
</script > 
</head> 
<body> 
<pid= "test"> 
< font color = " #000"> 哮 豆 壳 www.hi - docs. com </font > 
</p> 
< input type = "button" onclick = "setInnerHTML()" value= "点 击 " /> 
</body> 设置 标签 的 HTML 内 容 


</HTML> 区 到 
第 2 步 ,运行 程序 , 单 击 “ 点 击 ” 按 钮 ,出 现 如 图 6-20 所 示 的 结果 。 图 6-20 程序 结果 
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6.4 习 题 


1. 什么 是 HTML 文档 对 象 模型 , 它 具 有 何 功 能 ? 

2. 对 比 几 种 自动 刷新 页 面 方法 。 

3. 补充 完整 下 面 的 代码 ,实现 改变 超 链接 的 文本 和 URL。 把 现 有 超级 链接 myAnchor 
的 href 改 为 http://www. w3school. com. cn, target 改 为 blank, 链 接 的 文字 改 为 访问 
W3School。 


<HTML> 
<head> 
< script type = "text/javascript"> 


function changeLink( ) 
{ 
(1) 
(2) 
(3) 
} 
</script > 
</head> 
<body> 
<a id= "myAnchor" href = "http://www.microsoft,. com"> 访 问 Microsoft </a> 
< input type = "button" onclick = "changeLink()" value = "改变 链接 "> 
<p > 在 本 例 中 ,改变 超 链 接 的 文本 和 URL。 也 改变 target 属性 。target 属性 的 默认 设置 是 "_self"， 
这 意味 着 会 在 相同 的 窗口 中 打开 链接 。 通 过 把 target 属性 设置 为 ”blank", 链接 将 在 新 窗口 中 打 
开 。</p> 
</body> 
</HTML> 


4. 使 用 DOM 补充 whichButton 函数 ,实现 判断 是 单 击 了 鼠标 的 左 键 ,右键 ,还 是 中 键 
功能 。 


<HTML > 

<head> 

< script type = "text/javascript"> 
function whichButton(event) 


{ 


} 

</script> 

</head> 

< body onmousedown = "whichButton(event)"> 

<p> 请 在 文档 中 单 击 鼠 标 。 一 个 消息 框 会 提示 单 击 了 哪个 鼠标 按键 。</p> 
</body> 

</HTML> 


5. 使 用 DOM 补充 createOrder() 函数 ,实现 如 图 6-21 所 示 的 功能 :判断 一 个 表单 中 的 
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若干 个 复 选 框 checkbox 的 情况 ,在 文本 框 order 中 显示 结果 。 
你 豆 欢 怎么 喝 徊 啡 ? 


国 加 奶油 
茵 加 糖 块 


发 送 订单 














6-21 运行 结果 


<HIML> 

<head> 

< script type = "text/javascript"> 
function createOrder() 


{ 


} 

</script > 

</head> 

<body> 

<p> 你 喜欢 怎么 喝 咖啡 2</p> 

<form> 

< input type = "checkbox" name = "coffee" value = "奶油 "> 加 奶油 <br /> 
< input type = "checkbox" name = "coffee" value = " 糖 块 "> 加 糖 块 < br /> 
<br /> 

< input type = "button" onclick = "createOrder()" value = "发 送 订单 "> 
<br /><br /> 

< input type = "text" id= "order" size= "50"> 













































































有 Row 1|| 出 除 

RRow ?| 好 除 
</body> ow 引 l 吊 除 | 
</HTML> 

加 图 6-22 ”删除 表格 行 

6. 使 用 DOM 补充 deleteRow() 函 数 . 实 现 如 图 6-22 所 示 的 功能 。 效果 
<HTML > 

<head > 


< script type = "text/javascript"> 
function deleteRow(r) 
{ 
var i=r.parentNode. parentNode. rowIndex 
(1) 
} 
</script > 
</head> 
<body> 


<table id= "myTable" border = "1"> 
<tr> 
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<td> Row 1</td> 
<td> 
(2) 

</td> 

</tr> 

六 
<td>Row 2</td> 
(3) 

</td> 

</tr> 

<tr> 
<td> Row 3</td> 
(4) 

</td> 

</tr> 

</table> 

</body> 

</HTML > 





PHP 编程 


7.1 PHP 的 环境 配置 与 安装 


PHP 是 PHP Hypertext Preprocessor 的 首 字 母 缩 略 词 ,是 一 种 被 广泛 使 用 的 开源 脚本 
语言 ,可 供 免费 下 载 和 使 用 ,其 官方 资源 下 载 地 址 为 www. php. net。 官 方 的 PHP 网 站 
(PHP. net) 提 供 了 PHP 的 安装 说 明 : http://php. net/manual/zh/install. php。PHP 主要 
用 在 3 个 领域 。 

1. 服务 器 端 脚本 

PHP 是 传统 服务 器 端 脚本 语言 ,特别 适合 动态 网 页 ,是 PHP 的 最 主要 目标 领域 。PHP 
支持 集成 了 数据 库 接口 ,如 MySQL ,适合 建立 简单 的 小 型 个 人 网 站 到 复杂 的 大 型 网 站 。 

与 HTML 通过 加 载 页 面 分 析 网 页 内 容 的 工作 方式 不 同 ,PHP 通过 服务 器 进行 预 处 理 
文档 ,所 有 PHP 文档 代码 在 发 送 给 访问 者 之 前 需要 服务 器 处 理 。 开 展 这 项 工作 需要 具备 
以 下 3 个 模块 : PHP 解析 器 (CGI 或 者 服务 器 模块 )、Web 服务 器 和 Web 浏览 器 。 需 要 在 
运行 Web 服务 器 时 ,安装 并 配置 PHP, 然 后 可 以 用 Web 浏览 器 访问 PHP 程序 的 输出 , 即 
浏览 服务 端的 PHP 页面。 

2. 命令 行 脚本 

可 以 编写 一 段 PHP 脚本 ,并 且 不 需要 任何 服务 器 或 者 浏览 器 来 运行 它 。 通 过 这 种 方 
式 , 仅 仅 只 需要 PHP 解析 器 来 执行 。 这 种 用 法 对 于 依赖 cron(UNIX 或 者 Linux 环境 ) 或 者 
Task Scheduler(Windows 环境 ) 的 日 常 运行 的 脚本 来 说 ,是 理想 的 选择 。 这 些 脚 本 也 可 以 
用 来 处 理 简 单 的 文本 。 

3. 桌面 应 用 程序 

对 于 图 形 界面 的 桌面 应 用 程序 , PHP 或 许 不 是 最 好 的 语言 ,但 是 如 果 用 户 非 常 精通 
PHP, 并 且 和 希望 在 客户 端 应 用 程序 中 使 用 PHP 的 一 些 高 级 特性 ,可 以 利用 PHP-GTK 来 编 
写 这 些 程 序 。 


7.1.1 PHP 手工 安装 


1. PHP 下 载 

从 http://windows. php. net/download/ 页 面 下 载 PHP 的 zip 二 进 制 发行 包 ,不 需要 额 
外 的 安装 ,只 需 解压 到 指定 的 目录 ,如 C:\php-5. 3.28。PHP 有 多 个 版 本 ,根据 Web 服务 器 
选择 合适 的 版 本 : 如 果 是 IIS Web 服务 器 , 则 选择 PHP 5. 3 VC9 Non Thread Safe 或 者 
VC6 Non Thread Safe; 如 果 是 IIS 7. 0 Web 服务 器 或 更 高 版 本 以 及 PHP 5. 3 十 , 则 应 选择 
VC9 的 包 。 需 要 注意 到 是 ,VC9 版 本 是 用 Visual Studio 2008 编译 的 ,并 且 在 性 能 和 稳定 性 
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上 都 有 所 提高 。VC9 版 本 需要 用 户 系统 中 安装 有 Microsoft 2008 C++Runtime (x86) 或 者 
Microsoft 2008 C++Runtime (x64) 组 件 。 
在 下 载 的 php-5. 3. 28 VC9 Non Thread Safe 版 本 中 ,主要 文件 夹 和 文件 有 : 文件 夹 
Dev 中 有 非 线 程 安全 版 本 的 php5. lib 文件 ,文件 夹 ext 中 有 PHP 扩展 库 的 DLL 文件 目录 ， 
extras 为 空 。 文 件 php-cgi. exe 是 CGI 可 执行 文件 ,php-win. exe 是 无 窗口 执行 脚本 的 可 执 
行文 件 ,php. exe 是 PHP 命令 行 可 执行 文件 ,php. ini-development 是 默认 的 php. ini 设置 
文件 ,php. ini-production 为 推荐 的 php. ini 设置 文件 。 
2. 配置 
在 解压 的 根 目 录 下 找到 php. ini-development, 复 制 一 份 , 重 命名 为 php. ini。 使 用 记事 
本 或 其 他 文本 编辑 软件 打开 , 行 前 面 有 “; “的 表示 注释 说 明 , 搜 索 定位 register_globals 一 
Off, 如 图 7-1 所 示 。register_globals 默认 是 Off ,表示 关闭 此 全 局 变量 ; 也 可 设置 为 On, 表 
示 打 开 全 局 变量 。 区 别 在 于 ,如 果 这 个 值 设 为 Off, 就 只 能 用 “$ _POST[' 变 量 名 ]、$ _GET 
[' 变 量 名 ']” 等 来 取得 送 过 来 的 值 ; 如 果 设 为 On, 就 可 以 直接 使 用 *$ 变量 名 ?来 获取 送 过 来 
的 值 。 设 为 Off 就 比较 安全 ,不 会 让 人 轻易 将 网 页 间 传 送 的 数据 截取 ,因此 建议 不 要 打开 。 
设 为 On 主要 是 为 了 使 用 方便 。 
; Whether or not to register the EGPCS variables as global variables. You may 
; want to turn this off if you don't want to clutter your scripts' global scope 
; with user data. 
; You should do your best to write your scripts so that they do not require 
; register_globals to be on; Using form variables as globals can easily lead 
; to possible security problens, if the code is not very well thought of. 
; http://php.net/register-globals 
图 7-1 PHP.ini 文 件 的 全 局 变量 配置 


搜索 定位 extension_dir 如 图 7-2 所 示 ,修改 PHP 模块 的 目录 。 如 果 没 有 指定 这 些 模块 
文件 的 位 置 , 则 启动 Apache 或 IIS Web 服务 器 的 时 候 会 提示 *“ 找 不 到 指定 模块 "的 错误 。 


; Directory in uhich the loadable extensions (modules) reside- 
http://php.net/extension-dir 

extension dir = “./™ 

; TE 
; extension_dir = 










“ext"” 


Whether or not to enable the d1() function- The dl() function does NOT work 
properly in multithreaded servers, such as IIS or Zeus, and is autonatically 
disabled on them. 

http://php.net/enable-dl 

enable_dl = 0ff 


图 7-2 PHP. ini 文 件 中 的 PHP 目录 指定 


如 果 PHP 目录 为 C:\php-5. 3. 28-zip, 则 配置 extension_dir 一 "C:\php-5. 3. 28-zip\ 
ext" ,配置 后 的 结果 如 图 7-3 所 示 。 
; Directory in which the loadable extensions (nodules) reside 


; http://php.net/extension-dir 
和 






hp-5.3.28-zip\ext"| 


; Whether or not to enable the d1() function. The d1() function does NOT work 
; properly in multithreaded servers, such as IIS or Zeus, and is autonatically 
; disabled on them. 

; http://php.net/enable-dl 

enable_ = nff 


图 7-3 PHP.ini 文 件 中 的 PHP 目录 指定 结果 
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为 了 使 PHP 能 够 调用 其 他 模块 ,搜索 定位 *extension 一 ”, 找 到 如 图 7-4 所 示 的 模块 加 
载 处 。 去 除 选项 前 的 分 号 , 则 打开 此 模块 。 加 载 的 模块 越 多 ,占用 的 资源 就 会 稍微 多 些 ,但 
可 以 忽略 。 所 有 模块 都 放 在 php 解压 目录 下 的 ext 目录 中 ,可 以 根据 需要 启用 。 


;extension=php_bz2.d11 
;extension=php_curl.d11l 
extension=php_fileinfo-dl1 
;extension=php_gd2.d11 
;extension=php gettext.dll 
;extension=php_gmp -d11 
;iextension=php_intl1.d11 
;extension=php_imap.d11 
;sextension=php_interbase .dll 
;extension=php_1ldap .d11 
;extension=php_nbstring.d1l 
;extension=php_exif 


; Hust be after mbstring as it depends on it 
;extension=php mysi 


-dl11 
11-d11 





;extension=php_oci8-d11 ; Use with 0racle 19gR2 Instant Client 
;extension=php oci8 119-d1l ; Use with 0racle 11gR2 Instant Client 
;extension=php_openssl.-d11 

;extension=php_pdo_firebird.dll 

;extension=php_pdo_mssql .dll 

sextension=php_pdo_mysql.d1l 

;extension=php_pdo_oci.dll 

;extension=php_pdo_ odbc .dll 

;extension=php_pdo_pgsq1.d11l 

;extension=php_pdo_sqlite.dll 

;extension=php_pgsql-dl1 

;extension=php_pspell.d11 

;extension-php shmop.d11 


7-4 PHP.ini 文 件 的 extension 模块 调用 
如 果 需 要 启用 数据 库 管理 软件 MySQL 的 支持 , 则 搜索 定位 到 下 列 语句 : 


;extension = php_gd2. dll 
;extension = php_mbstring. dll 
;extension = php_mysql. dll 
;extension = php_openss1. dll 
;extension= php_pdo_mssql.dll 


去 除 前 面 的 “; ”就 可 以 了 。 


7.1.2 Apache 的 Web 服务 器 配置 PHP 


1， Apache 安装 与 配置 

从 官网 http://httpd. apache. org/download. cgi 下 载 Apache, 出 现 如 图 7-5 所 示 的 
Apache HTTP Server 2. 0. 65 的 安装 向 导 界 面 , 单 击 Next 按钮 ,一 直到 达 图 7-6 所 示 界 面 ， 
在 Network Domain 文本 框 中 填 入 域名 ,在 Server Name 文本 框 中 填 人 服务 器 名 称 , 在 
Administrator's Email Address 文本 框 中 填 人 系统 管理 员 的 电子 邮件 地 址 ,上 述 3 条 信息 仅 
供 参 考 ,其 中 电子 邮件 地 址 会 在 当 系 统 故障 时 提供 给 访问 者 ,3 条 信息 均 可 任意 填写 ,甚至 
无 效 的 信息 也 行 。 

下 面 有 两 个 选择 : 图 片上 选择 的 是 为 系统 的 所 有 用 户 安装 ,使 用 默认 的 80 端口 ,并 作 
为 系统 服务 自动 启动 ; 另外 一 个 是 仅 为 当前 用 户 安装 ,使 用 端口 8080 ,手动 启动 。 

单 击 Next 按钮 ,选择 安装 类 型 , Typical 为 默认 安装 ,Custom 为 用 户 自 定义 安装 ,选择 
Custom 有 更 多 可 选项 。 单 击 Next 按钮 然后 选择 安装 位 置 ,一 直 单 击 Next 按钮 ,直到 安装 
成 。 








bly 
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Welcome to the Installation Wizard for 
Apache HTIP Server 2.0.65 


The Instalation Wizard wil install Aoache HTTP Server 2.0.65 
on your computer, To continue, cick Nexct, 


WARNING: This program is protectsd by copyright law and 
international treaties, 











7-5 ”Apache 安装 向 导 


Server Information 
Please erer your server's informabicn. 


Network Domain (8.9. somenet com) 








Server Name (e.g, www,somenet, com): 


[slo-7é481-OEM-0011903-01801 


Administr ator's Emal address (e,g, webmaster@somenet, com); 


Piech@aiyun.com 


Instal Apache HTTP Server 2.0 programs and shortcuts for: 


© for al Users, on Port 80, as a 5arvice ~- Recommended, 
© onhy for the Currant User, on Port an60, when started Manualy. 


Installshield 

















<Back Next > ] Cancel 


图 7-6 Apache 系统 信息 设置 


为 了 检查 端口 是 否 被 占 ,在 Windows 系统 中 ,选择 “开始 一 运行 ”命令 ,输入 cmd, 在 
Dos 界面 下 输入 命令 : netstat-nao, 得 到 如 图 7-7 所 示 的 结果 ,从 中 可 以 查看 端口 是 否 被 占 
用 或 占用 的 进程 号 PID。 

一 般 最 常见 的 错误 是 端口 有 冲突 ,Apache 默认 的 端口 是 80, 如 果 端 口 80 被 另 一 个 程 
序 ( 如 IIS) 占 用 了 ,就 会 出 现 无 法 启动 的 情况 。 此 时 可 以 通过 下 列 步骤 修改 为 其 他 端口 : 

步骤 1, 在 Apache 安装 目录 的 conf 目录 下 找到 httpd. conf 文件 (如 d:\Apache\conf\ 
httpd. conf) ,用 记事 本 软件 打开 。 或 单 击 “开始 -> 程序 -> Apache HTTP Server 2. 0. 65-> 
Configure Apache Server-> Edit the Apache httpd. conf Configuration File” 打开 一 个 
Apache 的 配置 文件 。 

步 又 2, 找 到 Listen80 语句 , 紧 接着 Listen 的 数字 就 是 端口 号 ,可 以 改 为 没有 使 用 过 的 
端口 号 ,如 Listen 8888 ,修改 后 如 图 7-8 所 示 。 
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jc: \Docunents and Settings\xchmnetstat -nao 


ctiue Connections 


Proto i State PID 

TCP -有 -B-B: -日 - 罩 - 卓 : LISTENING 2468 

TCP -B-9- -9-B- LISTENING 844 
LISTENING 2468 
LISTENING 4 
LISTENING 2468 
LISTENING 1136 
ESTABLISHED 1712 
ESTABLISHED 1388 
LISTENING 1896 
LISTENING 5668 
LISTENING 1898 
ESTABLISHED 1898 
LISTENING 1?12 





图 7-7 端口 使 用 命名 查询 结果 


H Change this to Listen on specific IP addresses as shoun below to 
H prevent Apache from glonning onto all bound IP addresses (8.8.8.8) 
上 





HListen 
isten 8888| 





556.78:8883| 


夭 
片 Dunanic Shared Object {DS0) Support 


图 7-8 ”Apache 端口 地 址 修改 


步骤 3, 重新 启动 Apache, 使 新 的 配置 生效 。 可 以 使 用 右 下 角 状 态 栏 中 的 Apache 
Service Monitor 启动 Apache, 如 图 7-9 所 示 。 


Apache Service Wonitor 


Service 5tatus 


Bestart 


Services 





The exp_apache22 tating 
The exp_apache: has startod. Connect 


Ext 





Apache/2 2.19 (Win32) PHP/S.2.17 


图 7-9 Apache Service Monitor 控制 界面 


任务 栏 右 下 角 的 Apache 监视 图 标 变 绿灯 ,表示 正确 配置 和 运行 了 。 为 了 测试 其 他 是 
否 在 工作 ,打开 IE 浏览 器 ,在 地 址 栏 上 输入 http://localhost:8888/ ,如 果 能 看 到 如 图 7-10 
所 示 的 界面 , 则 说 明 Apache 已 经 工作 正常 了 。 

2. Apache 连接 PHP 配置 

如 果 使 用 Apache 1 或 Apache 2 作为 Web 服务 器 , 则 需要 选择 比较 旧 的 版 本 PHP 5. 3 
VC6 ,不 能 选用 PHP VC9 版 本 , 且 需 要 使 用 线程 安全 (Thread Safe,TS) 版 本 ,和 否则 在 PHP 
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一 时 国生 | 
由 工具 四 “大 贡品 
育 由 肆 天 部 加 Ja of ftenstin 图 百 友 -下 , NNIE 加 三， 辐 丙 人 二 ERR。 上 入 尖 -和 时 RA 
[ls 合 " 目 -二 - Ni. 5 加 - IO 
类 能 看 见 这 个 页 面 ， 说 明 如 ashe web sezvsr 已 经 安装 成 功 。 笃 可 以 在 这 个 目录 中 增加 内 容 ， 或 者 把 这 个 页 面 苦 换 荐 ， 





这 不 是 你 想 看 见 的 页 面 吧 ? 


A 页面 ， 是 因为 网 站 管理 只 改变 了 这 个 站 点 的 设置 如 采 有 颇 月 ， 彰 咨询 维护 此 站 点 的 人 员 。 Apzchc 软 件 基 全 会 ， 即 此 站 点 所 使 用 的 网 站 服务 器 软 件 的 开 
监理， 不 负责 此 站 点 的 维护 工作 ， 记 元 注 为 和 解决 设 是 上 的 问题 。 





如 ache 交 档 已 经 世 宫 在 此 发 行 版 中 。 


息 同 以 在 使 用 peche 的 网 站 服务 器 上 ， 自 由 地 使 用 下 面 绝 图 片 。 丰 澳 使 用 pache 
i A 





图 7-10 ”Apache 测试 结果 


安装 目录 里 没有 php5apache2_2. dll。 下 载 PHP 5.3 VC6 x86 Thread Safe 版 本 ,解压 到 指 
定 的 路 径 , 如 c:\ php-5. 3. 28-apache 后 ,PHP 的 配置 与 7.1.1 节 相同 。 

当 Apache 和 PHP 都 成 功 安装 后 ,需要 修改 Apache 的 配置 文件 ,以 便 Apache 能 找到 
PHP 编译 解释 的 DLL 文件 。 打 开 Apache2 的 配置 文件 (http. conf) ,在 这 个 文件 中 搜索 定 
位 LoadModule, 其 后 面 是 一 串 路 径 , 这 些 都 是 Apache 默认 要 加 载 的 模块 。 在 这 些 加 载 模 
块 的 后 面 加 上 下 面 两 条 语句 : 


addType application/x- httpd— php .php 
LoadModule php5_module C:/php - 5.3.28 - apache /php5apache2. dll 


其 中 ,php5_module 是 模块 的 名 称 , 后 面 是 PHP 安装 的 目录 路 径 , 这 3 个 字 串 之 间 是 用 空格 
符 分 隔 的 。 

为 了 验证 在 ApacheWeb 服务 器 上 能 否 运 行 PHP 网 页 ,把 文件 D:\PHP-Server\index. 
php 复制 到 Apache 的 htdocs 文件 夹 中 , 即 C:\Apache\Apache2\htdocs 目录 中 。 

Apache 默认 的 主 目录 设置 如 图 7-11 所 示 , 如 果 需 要 添加 虚拟 目录 D:/PHP-Server/ 
apache, 则 需要 先 为 虚拟 目录 的 物理 文件 创建 一 个 别名 : 


Alias /apache "D:/PHP - Server/apache" 
然后 为 虚拟 目录 添加 访问 权限 设置 : 


<Directory "D:/PHP— Server/apache"> 
Options Indexes MultiViews 
AllowOverride None 
Order allow, deny 
Allow from all 


</Directory> 


配置 后 的 结果 如 图 7-12 所 示 , 在 文件 夹 D:/PHP-Server/apache 中 复制 index. php 文 
件 , 然 后 在 正 浏览 器 中 输入 http://localhost:8888/apache/ 可 以 验证 是 否 配 置 正确 。 
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失 
# This should be changed to whatever you set [THIETINto. 
排 


《Directory “C:/Apache/Apache27htdocs"> 


图 7-11 Apache 主 目录 


KDirectory “CGC:/WinNT/profiles/x*/My Documents/My Website"> 
AllowOverride FileInfo AuthConfig Limit 
Dptions Multiuiews Indexes Syml inkslfOwnerMatch IncludesNoExec 
<Limit GET POST 0PTIONS PROPFIND> 
Order allow,deny 
Allow From all 
/Linit> 
<LimitExcept GET POST NPTINNS PRNPFIND> 
Order deny,allow 
Deny from all 
</LimitExcept> 
</Directory> 


L3 
拓 
LL 
# 
LL 
EL 
L 
县 
持 
LL 
L 
3 


Rlias /apache “D:/PHP-Server/apache" 
<Directory “D:/PHP-Server/apache"> 
Uptions Indexes MultiViews 
AllowOverride None 






Order allow,deny 
Allow From all 
</Directory> 









图 7-12 Apache 2.0 添加 虚拟 目录 


7.1.3 PHP 集成 开发 环境 


目前 为 此 ,开发 机 器 具备 了 PHP 程序 运行 所 有 的 条 件 , 下 一 步 就 是 选择 如 何 书写 PHP 
脚本 。 尽 管 PHP 是 纯 脚 本 的 语言 ,可 以 使 用 基本 的 记事 本 或 文本 编辑 等 工具 ,但 是 专业 的 
开发 工具 和 集成 的 开发 环境 具有 更 多 的 优势 。PHP 集成 开发 工具 有 很 多 ,这 里 简单 介绍 一 
下 Eclipse\PHPEdit .ZendStudio 和 NetBeans。 

1. Eclipse 

在 Eclipse 开发 平台 中 有 两 个 插件 支持 PHP。 第 一 个 PHP 集成 开发 环境 是 
EclipseFoundation 项 目 , 这 意味 着 它 在 Eclipse 许可 范围 内 发 布 ,并 使 用 EclipseFoundation 
工具 和 方法 开发 。 另 一 个 是 PHPEclipse, 它 是 独立 开发 的 。 因 为 使 用 Eclipse, 所 以 这 两 
个 插件 都 可 以 在 三 大 操作 系统 (Windows、Linux 和 MacOSX) 中 运行 。 可 以 只 下 载 这 两 个 
插件 (如 果 已 经 使 用 Eclipse) ,或 者 下 载 包含 所 需要 的 全 部 内 容 的 pre-fab 版 本 。 这 两 个 插 
件 都 支持 核心 IDE 特性 。 特 别 是 代码 智能 特性 , 它 十 分 强大 ,可 以 在 需要 的 时 候 弹出 并 显 
示 所 有 需要 的 类 、 方 法 和 参数 信息 。 

2. PHPEdit 

来 自 WaterProofSoftware 的 PHPEdit 感觉 像 是 应 用 于 PHP 的 Microsoftmsdev 环 
境 一 一 这 是 一 件 不 错 的 事情 。PHPEdit 是 仅 用 于 Windows 的 IDE, 很 容易 设置 。 它 甚至 还 
有 了 PHP 的 版 本 。 

3. ZendStudio 

Zend 一 一 PHP 幕后 的 精英 团队 。 它 运行 于 Windows、MacOSX 和 Linux 三 大 系统 。 
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而 且 绝对 能 够 提供 所 需要 的 一 切 ,如 PHPv4、PHPv5 等 。 作 为 IDE,ZendStudio 是 最 好 的 。 
它 提供 所 有 想 在 内 置 库 和 定制 代码 中 拥有 的 代码 智能 特性 。 它 还 有 非常 好 的 调试 功能 ,而 
且 极 易 设 置 。 要 把 代码 放 到 存储 库 (repository) 中 , ZendStudio 会 连接 到 CVS 和 
Subversion。 要 把 代码 放 到 服务 器 上 ,有 集成 FTP 可 以 使 用 。 

4. NetBeans 

NetBeans 包括 开源 的 开发 环境 和 应 用 平台 , NetBeans IDE 可 以 使 开发 人 员 利 用 Java 
平台 快速 创建 Web 企业、 桌面 以 及 移动 的 应 用 程序 ,NetBeans IDE 已 经 支持 PHP、Ruby、 
JavaScript、Groovy、Grails 和 C/C++ 等 开发 语言 。 相 对 zend studio 来 说 ,NetBeans 对 硬件 
的 要 求 没 那么 高 ,打开 速度 也 比较 快 。 此 外 ,NetBeans 具有 跨 平 台 (Windows、MacOS、 
Linux 平 台 都 可 用 ), 且 开源 免费 ,还 集成 了 SVN (SubVersion) 和 CVS(Concurrent 
Version System) 等 功能 。 本 书 采用 的 是 NetBeans 十 Apache 的 集成 开发 环境 ,配置 步骤 
如 下 : 

第 1 步 ,打开 NetBeans IDE, 选 择 “ 文 件 -> 新 建 项 目 ” 菜 单 命令 ,得 到 如 图 7-13 所 示 的 
“新 建 项 目 ” 对 话 框 。 
































步 叉 远 择 硕 目 
二 过 择 顺 上 Q 过 EB 器: | 
| 类 别 (CC): 项 目 名 ): 
r 展 mmms [BRB PHP 应 用 程序 
-区 园 | 节 基于 现 有 源 共 码 的 FI 应 用 程序 
| 碳 甘 本 i 来 自 远 和 服务 器 的 PP 应 用 程序 
| 
| 
| 
搞 述 @) 
在 标准 IDE 项目 中 创建 一 个 新 的 PHP 50 应 用 程序 。 本 以 径 愉 运 行 和 调试 此 类 硕 目 。 
[ 《4 上 - 步 四 ] EREE 此 Dj| EO ] [Eee crihwe 








图 7-13 “新 建 项 目 ” 对 话 框 


第 2 步 , 单 击 “ 下 一 步 ” 按 钮 ,得 到 如 图 7-14 所 示 的 “新 建 PHP 项 目 ” 对 话 框 ,如 图 7-15 
所 示 的 源 文件 夹 指 的 是 Apache 服务 器 的 文档 文件 夹 ,根据 Apache 的 httpd. conf 文件 中 的 
文档 目录 设置 ,如 图 7-16 所 示 。 

第 3 步 , 单 击 * 下 一 步 ?按钮 ,进入 "运行 配置 选项 *, 如 图 7-17 所 示 。 项 目 URL 的 Web 
服务 器 根据 Apache 的 httpd. conf 的 端口 配置 ,索引 文件 为 项 目的 启动 文件 。 















































二 全 吕 = 项 上 BD: 。 [Phpprejeetl | 
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5， 编写 器 
PIP 版 本 CD) B56 
FiP 版 本 仅 用 于 提示 
| 
回 将 jetBesns 元 数据 让 入 单独 的 目录 @) 











元 青 撒 文件 赤 图 ) : |D: WDecunents\JetBeansPrejects\FhpProjectl 




















世上 = 步 @-] [一 下 = 步 > 一 ] [一半 成 O |][ 了 | [一 大 |] 








图 7-14 “新 建 PHP 项 目 ” 对 话 框 



































步 凶 名 称 和 位 置 

二 人 全 项 目 名 称 四 :|Pevebaite 

3， 运行 配置 源 文 件 去 6 Co wenp ww Phplobsits 加 
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图 7-15 项 目 名 称 和 位 置 的 设置 











网 

# If your host doesn' t have a registered DNS name, enter its IP address here. 
周 

ServerName localhost:8888 


# 

# DocumentRoot: The directory out of which you will serve your 

# documents, By default, all requests are taken from this directory, but 
# symbolic links and aliases may be used to point to other locations. 


# Each directory to which Apache has access can be configured with respect 
# to which services and features are allowed and/or disabled in that 

# directory (and its subdirectories). 

网 


# First, we configure the “default” to be a very restrictive set of 
# features. 





图 7-16 Apache 的 文档 位 置 
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7-17 运行 配置 选项 


5. wampserver 的 集成 软件 

手动 安装 和 配置 Apache 十 PHP 十 MySQL 这 3 个 软件 比较 麻烦 ,可 以 使 用 法 国人 开发 
的 ApacheWeb 服务 器 .PHP 解释 器 以 及 MySQL 数据 库 的 整合 软件 包 WampServer, 这 样 
就 免 去 了 开发 人 员 将 时 间 花 费 在 烦琐 的 配置 环境 过 程 , 从 而 腾 出 更 多 精力 去 做 开发 。 

在 Windows 下 将 Apache 十 PHP 十 MySQL 集成 环境 WampServer, 拥 有 简单 的 图 形 、 
菜单 安装 和 配置 环境 。 可 以 实现 PHP 扩展 、Apache 模块 的 开启 /关闭 等 配置 功能 。 
WampServer 软件 是 完全 免费 的 ,可 以 从 其 官方 网 站 下 载 最 新 版 本 。 


7.2 PHP 语法 


PHP 脚本 与 JavaScript 脚本 看 起 来 差不多 ,但 也 有 些 重 要 的 区 别 。PHP 脚本 要 求 每 行 
以 “; ”结束 ,但 是 JavaScript 脚本 不 需要 。 每 个 PHP 变量 名 必须 用 前 级 $ ”符号 。 变 量 不 
需要 提前 定义 ,也 没有 JavaScript 一 样 的 关键 词 进行 声明 。 

1. PHP 文档 结构 

PHP 脚本 或 内 嵌 于 HTML 文档 中 ,或 是 单独 的 一 个 文档 。 将 PHP 代码 包含 在 标签 
<? PHP ? > 之 间 , 就 可 以 将 PHP 代码 岩 入 到 文档 中 。 

【 例 7-1】 在 PHP 页 面 中 显示 字符 串 “hello,world;”。 

第 1 步 ,在 NetBeans 中 建立 项 目 PhpWebsite, 源 文件 保存 在 Apache 的 根 目 录 C:\ 
wamp\www\PhpWebsite 下。 

第 2 步 , 右 击 源 文 件 ,选择 “新 建 -> php 页 面 "命令 ,命名 为 Ex7-1. php ,添加 代码 如 下 : 


<HIMDL> 


= 
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<head> 


<title> PHP example 1 </title> 


<Meta = "utf -8" /> 
</head> 
<body> 
<?php 
print "hello, world" 
?> 
</body> 
</HTML> 


尽管 内 容 上 与 HTML 文件 接近 ,但 是 保存 文件 类 型 必须 是 php ,如果 保存 为 HTML， 
则 看 不 到 结果 , 且 PHP 对 文件 名 也 是 区 分 大 小 写 的 ,保存 为 ex001. php 和 Ex001. php 是 两 


个 不 同 的 文件 。 


PHP 脚本 可 以 保存 在 不 同 的 文件 中 ,可 以 将 文件 名 作为 参数 传 给 include 命令 ,把 存储 
于 文件 中 的 内 容 引 入 到 当前 的 文件 中 ,被 包含 的 内 容 可 以 是 标记 、 客 户 端 脚本 和 PHP 代 
码 , 但 必须 作为 标签 <? php?> 的 内 容 。 


【 例 7-2】 
Ex7-2. php 中 。 


文件 Ex7-2. php 通过 include 命令 把 存在 于 Ex7-2. ini 文件 中 的 内 容 导 入 到 


第 1 步 ,在 PhpWebsite 项 目 中 添加 新 INI 文 件 ,如 图 7-18 所 示 。 


[DC > -< 工 工 工 有 


4 
上 选择 文件 类 型 





选择 文件 类 型 
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县 ”| “模板 ， 然 后 在 编辑 器 中 打开 该 厦 板 。 





创建 空 IT 文件。 可 以 在 IDE 的 源 代码 编辑 器 中 编辑 该 文件 。 要 更 改 此 模板 ， 请 造 择 “ 工 
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7-18 添加 INI 文件 


第 2 步 ,在 Ex7-2.ini 文件 中 添加 代码 : 


<?php 
print "hello, world"; 
?> 
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第 3 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-2. php ,并 设置 为 索引 文件 。 
第 4 步 , 在 Ex7-2. php 中 添加 代码 : 
<?php 


include("Ex7 — 2. ini"); 
?> 


第 5 步 ,运行 程序 ,得 到 结果 : 
hello, world 


为 了 与 其 他 软件 ,如 Microsoft Front Page 兼容 ,PHP 也 支持 使 用 HTML 的 < script > 
标签 。 如 : 

< script language = "php"> 

echo 'This is some text'; 
</script > 

但 是 ,为 了 避免 与 JavaScript 混淆 ,一 般 不 鼓励 使 用 < script >, 且 上 述 内 容 要 保存 在 PHP 
文档 中 。 

2. PHP 变量 名 

PHP 所 有 的 变量 名 必须 以 “$ ”开头 ,后 面 可 以 是 字母 或 下 面 线 再 加 上 任意 个 字母 、 数 
字 或 下 面 线 ,但 要 注意 区 分 大 小 写 。 

虽然 PHP 的 变量 名 区 分 大 小 写 ,但 是 保留 的 关键 字 和 函数 的 名 称 是 不 区 分 大 小 写 的 ， 
如 while, While, WHILE,whiLe 是 一 样 的 。PHP 的 保留 关键 字 见 表 7-1 所 示 。 


表 7-1 PHP 的 保留 关键 字 












































保留 字 and else global require virtual break elseif if 
保留 字 return xor case extends include static while class 
保留 字 false list switch continue for new this default 
保留 字 foreach not true do function or var 

3. PHP 注释 


PHP 有 3 种 注释 方式 ,单行 注释 以 # 或 // 开 始 ; 多 行 注释 用 / *x /。 

【 例 7-3】 实现 单行 和 多 行 的 PHP 文 档 。 

第 1 步 , 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-3. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-3. php 中 添加 代码 : 


<!DOCTYPE HTML > 
<HITML > 
<head> 
< Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
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// 这 是 单行 注释 

print "// 这 是 单行 注释 "; 
# 这 也 是 单行 注释 

print " # 这 也 是 单行 注释 "; 
/x* 
这 是 多 行 注释 块 
它 横 跨 了 
多 行 
x*/ 

print " /* 可 以 是 多 行 注释 * /"; 


?> 


</body> 
</HTML > 


第 3 步 ,运行 程序 ,得 到 结果 : 
// 这 是 单行 注释 # 这 也 是 单行 注释 / * 可 以 是 多 行 注释 * / 


7.3 基本 数据 类 型 和 表达 式 


7.3.1 常量 和 变量 


PHP 中 的 常量 分 为 自 定义 常量 和 系统 常量 。 自 定义 常量 需要 使 用 PHP 函数 进行 定 
义 。 系 统 常量 可 以 直接 拿 来 使 用 。 下 面 来 看 这 两 种 常量 在 使 用 上 有 什么 不 同 。 

1. 自 定义 常量 

自 定义 常量 必须 用 函数 define() 定 义 , 定 义 后 其 值 不 能 再 改变 ,使 用 时 直接 用 常量 名 ， 
不 能 像 变量 一 样 在 前 面 加 $ 。 

2. 系统 常量 

系统 常量 ,如 FILE 表示 php 程序 文件 名 ,LINE 表示 PHP 程序 文件 行 数 ， PHP_ 
VERSION 表示 当前 解析 器 的 版 本 号 ,PHP_OS 表示 执行 当前 PHP 版 本 的 操作 系统 名 称 ， 
这 些 系统 常数 可 以 直接 使 用 。 

【 例 7-4】 自 定义 常量 PI 和 字符 串 。 

第 1 步 , 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-4. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-4. php 中 添加 代码 : 

<HTML > 

<head> 


< Meta charset = "UTF ~- 8"> 
<title></title> 


</head> 

<body> 
<?php 
header("Content - type: text/HTML; charset = utf -8"); // 定 义 字 符 集 
define( "PI", 3.14); // 定 义 一 个 常量 


$ R=3; 人 定义 二 个 变革 


Web 系统 与 技术 





$area = PIx SRx $R; // 计 算 圆 的 面积 
echo $ area; 

define("URL", "http://www. jb51. net" ); 

echo "我 的 网 址 是 :". URL; 


echo PHP_0S; // 查 看 执行 当前 PHP 版 本 的 操 
作 系统 名 称 
echo PHP_VERSION ; // 查 看 当前 PHP 版 本 号 
?> 
</body> 
</HTML> 
第 3 步 ,运行 程序 ,得 到 结果 : 
28.26 
我 的 网 址 是 : http://www. jb51. net 
WINNT5.2.9 一 2 


变量 是 用 于 识别 一 个 系统 内 存 值 的 关键 词 , 可 以 想象 为 存储 数据 的 容器 。 一 旦 数据 被 
存储 在 一 个 变量 中 ,变量 可 以 被 改变 。 因 为 PHP 动态 地 定义 类 型 ,所 以 没有 类 型 声明 请 
句 , 变 量 的 类 型 可 以 随时 在 赋值 时 定义 。 


$ R=3; // 定义 一 个 变量 ,但 没有 声明 其 具体 的 数据 类 型 


变量 的 命名 规则 : 

所 有 的 变量 名 必须 以 美元 符号 ($ ) 开 始 。 

美元 符号 后 面 的 第 一 个 字母 必须 是 字母 (A 一 Z,a 一 2) 或 下 画 线 (_) ,不 能 是 数字 。 

变量 名 其 余部 分 可 以 包含 任何 数量 的 字母 ,数字 和 下 夯 线 。 

变量 名 不 能 出 现 空格 。 

变量 名 必须 唯一 。 

变量 名 区 分 大 小 写 。 

有 效 的 变量 名 ,如 $first_name, $person, $al, $_server。 无 效 的 变量 名 ,如 $ first 
name, $ 1a, $ person. name ,first_name。 

PHP 的 变量 是 临时 的 ,它们 只 能 存在 于 一 个 脚本 的 执行 期 间 , 当 脚本 的 最 后 一 个 PHP 
标签 被 执行 后 ,这 些 变量 就 不 存在 了 。 当 用 户 单 击 一 个 链接 或 提交 一 个 表单 ,获得 一 个 新 的 
页 面 , 这 些 变量 就 不 存在 了 。 

没有 被 赋值 的 变量 有 时 也 称 为 未 绑 定 的 变量 , 值 为 NULL, 这 是 NULL 类 型 的 唯一 取 
值 。 如 果 未 绑 定 的 变量 用 在 表达 式 中 ,NULL 会 根据 上 下 文 被 强制 转换 为 某 种 类 型 的 一 个 
值 。 如 果 上 下 文 是 一 个 数字 ,NULL 就 会 转换 为 0; 如 果 上 下 文 是 一 个 字符 串 , NULL 就 转 
换 为 空 字符 串 。 可 以 用 IsSet 函数 来 测试 一 个 变量 当前 是 否 拥有 一 个 值 ,该 函数 用 变量 的 
名 称 作为 参数 ,并 返回 一 个 布尔 值 。 例 如 ,如 果 $fruit 当前 的 值 非 空 ( 即 不 是 NULL), 则 
IsSet($fruit) 返 回 True 值 ,否则 返回 False。 一 个 被 赋 了 值 的 变量 会 一 直 保 持 该 值 ,直到 
它 被 赋 上 新 值 或 被 unset 函数 设置 为 未 赋值 状态 。 

如 果 想 报告 未 绑 定 的 变量 被 引用 的 情况 ,可 使 用 15 作为 参数 值 来 调用 error_reporting 
函数 , 即 error_reporting(15)。 在 文档 文件 中 需要 将 该 调用 语句 放 在 脚本 开头 。 默 认 的 错 
误 报 告 级 别 为 7, 即 error_reporting(7) ,这 意味 着 解释 器 将 不 会 报告 未 绑 定 变量 的 使 用 
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情况 。 
PHP 中 有 许多 预定 义 变量 ,其 常见 的 预定 义 变 量 如 下 : 
$ GLOBALS: 引用 全 局 作用 域 中 可 用 的 全 部 变量 。 
$_SERVER: 服务 器 和 执行 环境 信息 。 
$_GET: HTTP GET 变量 。 
$_POST: HTTP POST 变量 。 
$_FILES: HTTP 文件 上 传 变量 。 
$_REQUEST: HTTP Request 变量 。 
$_SESSION: Session 变量 。 
$_ENV: 环境 变量 。 
$_COOKIE: HTTP Cookies。 
$ php_errormsg: 前 一 个 错误 信息 。 
$ HTTP_RAW_POST_DATA: 原生 POST 数据 。 
$ http_response_header: HTTP 响应 头 。 
$argc : 传递 给 脚本 的 参数 数目 。 
$argv : 传递 给 脚本 的 参数 数组 。 
可 以 使 用 函数 print_rO 〇 显示 变量 值 。 
【 例 7-5】 使 用 预定 义 变量 $_SERVER 显示 服务 器 的 基本 信息 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-5. php, 并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-5. php 中 添加 代码 : 


<? php 
Print_r( $ _SERVER) 
?> 


第 3 步 ,运行 程序 ,结果 如 下 : 


Array ( [HTTP_ACCEPT] = > text/HTML,application/xHTML + xml, * /* 

HTTP_ACCEPT_ LANGUAGE] => zh— CN [HTTP_USER AGENT] => Mozilla/5.0 (Windows NT 6.1; Trident/ 
7.0; rv:11.0) like Gecko 

HTTP_ACCEPT ENCODING] = > gzip, deflate 

HTTP_HOST] => localhost:8888 

HTTP_CONNECTION] => Keep- Alive 

HTTP_COOKIE] => id= 234 

PATH] => C:\Program Files\Windows Kits\8.1\Windows Perform ance Toolkit\;C:\Program Files\ 
Microsoft SQL Server\110\Tools\Binn\; 

SystemRoot] => C:\Windows [COMSPEC] => C:\Windows\system32\cmd. exe 

PATHEXT] => .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSFE;.WSH;.MSC 

WINDIR] => C:\Windows 

SERVER_SIGNATURE] => 

SERVER_SOFTWARE] = > Apache/2.2.22 (Win32) PHP/5.3.13 [SERVER NAME] => localhost 
SERVER_ADDR] => 127.0.0.1 

SERVER_PORT] => 8888 

REMOTE ADDR] => 127.0.0.1 

DOCUMENT_ ROOT] => C:/wamp/www/ 
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SERVER_RDMIN] => admin@]localhost 
SCRIPT_FILENAME] = > C:/wamp/www/PhpWebsite/Ex7 - 5.php 
REMOTE_PORT] = > 28841 

GATEWAY INTERFACE] => CGI/1.1 
SERVER_PROTOCOL] => HTTP/1.1 

REQUEST METHOD] = > GET 

QUERY_STRING] => 

REQUEST URI] = > /PhpWebsite/Ex7 - 5.php 
SCRIPT_NRME] = > /PhpWebsite/Ex7 - 5.php 
PHP_SELF] => /PhpWebsite/Ex7 - 5.php 
REQUEST TIME] => 1500709775 ) 


7.3.2 基本 数据 类 型 


PHP 有 4 种 标量 类 型 .两 种 复合 类 型 和 两 种 特殊 类 型 。 标 量 类 型 有 布尔 型 . 整 型 \ 双 精 
度 型 和 字符 串 型 ; 复合 类 型 有 数组 和 对 象 ; 特殊 类 型 是 资源 (resource) 和 NULL。 

1. 整数 类 型 

PHP 只 有 一 个 整数 类 型 ,叫做 integer。 这 种 类 型 与 C 请 言及 其 后 继 语 言 中 的 long 类 
型 是 一 样 的 , 它 的 大 小 等 于 运行 程序 的 那 台 计算 机 的 字 大 小 ,如 32 位 或 64 位 。 因 为 PHP 
是 一 个 松散 类 型 的 语言 ,没有 必要 先 声 明 一 个 变量 是 整数 类 型 。 但 是 ,如 果 认为 有 必要 ,可 
以 明确 (int) 转 换 。 如 

$ £00=27; // 一 个 整数 外 面 没有 括号 ,都 意味 着 是 整数 

$ bar = (int) "3- peat"; // 结果 为 3 

$ baz = (int) "seven";  ”// 结果 为 0 

$ bat = (int) "ten 4"; // 结果 为 0 

2. 双 精 度 类 型 

PHP 的 双 精 度 类 型 与 C 语言 及 其 后 继 语言 中 的 double 类 型 是 一 样 的 。 双 精 度数 可 以 
包含 一 个 小 数 点 ,一 个 指数 或 者 两 者 错 有 。 指 数 通 常 的 格式 为 一 个 字母 EE 或 e, 后 面 可 以 跟 
一 个 有 符号 整数 。 小 数 点 前 面 或 者 后 面 不 一 定 要 有 数字 ,如 . 345 和 345. 都 是 合法 的 双 精 
度数 。 

3. 字符 串 类 型 

PHP 中 的 字符 是 单个 字 节 ,不 支持 Unicode。PHP 中 没有 字符 类 型 。 单 个 字符 就 是 一 
个 长 度 为 1 的 字符 串 表 。 字 符 串 字面 量 可 以 用 单 引 号 (“”) 或 双 引 号 (“”) 包 起 来 表示 ,字符 
串 的 长 度 只 受 具体 计算 机 的 可 用 内 存 的 限制 。 

在 单 引 号 字符 串 字 面 量 中 , 转 义 字符 (如 \n) 没 有 特殊 含义 ,并 且 内 嵌 变 量 在 输出 时 不 
会 用 变量 的 值 来 代替 (这 种 蔡 代 称 为 插值 )。 用 单 引 号 是 PHP 表示 字符 串 的 最 简单 的 方 
式 , 不 会 扩展 特殊 的 字符 或 变量 ,只 会 把 它们 以 文本 的 方式 显示 在 浏览 器 上 。 

【 例 7-6】 单 引号 的 实例 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-6. php, 并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-6. php 中 添加 代码 : 





<HIML> 
<head> 
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<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
// The <br /> 在 浏览 器 中 画 一 条 直线 ,以 增加 可 读 性 
echo 'This is a string. <br />'; 
echo 'This is a string 
with line breaks. < br />'; 
// 用 \ 输 出 单 引号 中 的 特殊 字符 ,如 新 起 一 行 (\n) 
echo 'This is a string \n with a newline character. <br />'; 
echo 'This string\'s got an apostrophe. <br />'; 
// 如 果 不 是 为 了 转 义 特殊 字符 , 反 和 斜 线 没有 必要 加 转 义 符 
echo 'This string has a backslash (\) in it. <br />'; 
echo 'This string has an escaped backslash (\\) in it. <br />'; 
// 单 引号 内 的 变量 不 会 展开 
echo 'This $ variable will not be expanded. <br />'; 
?> 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,结果 如 下 : 


This is a string. 

This is a string with line breaks. 

This is a string \n with a newline character. 
This string's got an apostrophe. 

This string has a backslash (\) in it. 

This string has an escaped backslash (\) in it. 
This $ variable will not be expanded. 


在 双 引 号 字符 串 字 面 量 中 可 以 识别 转 义 字符 ,并 且 会 用 当前 值 替 换 内 赃 的 变量 。 如 果 
想 使 双 引号 字符 串 字面 量 中 含有 的 变量 名 不 被 数值 替换 ,可 在 第 一 个 字符 ( 即 美元 符号 ) 的 
前 面 加 一 个 转 义 字符 (\)。 如 果 双 引号 字符 串 字 面 量 中 包含 的 变量 名 对 应 的 变量 的 值 为 空 ， 
则 该 变量 名 用 空 字符 串 替换 。 

双 引 号 引用 的 字符 串 可 以 包含 内 嵌 的 换行 符 ( 由 键盘 上 的 Enter 键 创建 ), 这 样 的 字符 
与 在 字符 串 中 加 入 \n 的 结果 完全 一 致 。 

【 例 7-7】 双 引 号 的 实例 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-7. php, 并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-7. php 中 添加 代码 : 

<HTML > 

<head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
echo "This isa string. <br />"; 
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echo "This is a string 

that spans 

multiple lines. <br />"; 

// 在 双 引 号 里 撤 号 不 需要 转 义 

echo "This string's got an apostrophe. <br />"; 

// 显示 双 引 号 需要 转 义 

echo "This string says,\"I need escaping!\" <br />"; 

// 可 以 解释 新 起 一 行 的 字符 

echo "This string has \n newline \n characters. <br />"; 


// 如 果 没 有 特殊 字符 跟 在 反 斜 杠 后 面 , 则 直接 输出 反 斜 杠 
echo "This string contains a backslash (\). <br />"; 
// 变量 如 果 不 用 转 义 字符 跳 脱 ,就 会 展开 
$ variable = "word"; 
echo "This string uses a $ variable. <br />"; 
// 用 word 代替 了 $ variable 
echo "This string escapes the \ $ variable. <br />"; 
// 添加 \ 后 ,显示 $ variable 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 


This isa string. 

This is a string that spans multiple lines. 
This string's got an apostrophe. 

This string says, "I need escaping!" 

This string has newline characters. 

This string contains a backslash (\). 

This string uses a word. 

This string escapes the $ variable. 


字符 串 之 间 的 连接 ,可 以 使 用 符号 *.”, 如 


<?php 

$fo0 = "This isa" . "string."; 
echo $ foo; 

?> 


输出 结果 如 下 : 
This is a string. 


除数 组 和 对 象 类 型 以 外 的 变量 ,也 可 以 通过 “. ”连接 。 

【 例 7-8】 字符 串 之 间 的 连接 运算 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-8. php, 并 设置 为 索引 文件 。 
第 2 步 , 在 Ex7-8. php 中 添加 代码 : 


<HIML > 
<head> 
< Meta charset = "UTF — 8"> 
<title></title> 
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</head> 
<body> 
<?php 
$fo0o=" This isa™; 
$bar= "string."; 
echo $ foo. $ bar; 
?> 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 
This is a string. 


4. 布尔 类 型 

布尔 类 型 只 有 两 种 可 能 值 : True 和 False, 并 且 是 不 区 分 大 小 写 的 。 虽 然 布 尔 数据 类 
型 与 整 型 数据 类 型 的 意义 是 一 样 的 ,但 布尔 类 型 的 上 下 文中 可 以 使 用 其 他 类 型 的 表达 式 。 
如 果 要 在 布尔 上 下 文中 使 用 一 个 非 布尔 类 型 的 表达 式 , 显 然 程序 员 需 要 知道 该 表达 式 会 被 
解释 成 何 种 含义 。 如 果 在 布尔 类 型 的 上 下 文中 使 用 整 型 表达 式 , 则 0 被 求 值 成 False, 其 他 
值 被 求 值 为 True。 如 果 在 布尔 类 型 的 上 下 文中 使 用 字符 串 表 达 式 , 则 空 字符 串 或 字符 串 
“0” 被 求 值 成 False, 其 他 值 被 求 值 为 True。 这 就 意味 着 字符 串 “0. 0 会 被 求 值 为 True。 

解释 为 False 的 唯一 的 双 精 度 值 是 0.0。 由 于 会 出 现 舍 入 偏差 ,以 及 字符 串 “0.0” 会 被 
求 值 成 True 的 情况 ,因此 不 提倡 在 布尔 类 型 的 上 下 文中 使 用 双 精 度 的 表达 式 。 有 些 值 可 
能 非常 接近 零 ,但 由 于 它 不 等 于 零 , 所 以 会 被 求 值 为 True。 


7.3.3 类 型 转换 


PHP 包含 了 显示 和 隐 示 的 类 型 转换 。 隐 示 类 型 转换 属于 强制 转换 ,上 下 文 引起 表达 式 
值 类 型 的 强制 转换 。 允 许 转换 的 PHP 数据 类 型 有 : 

(int) Cinteger) : 转换 成 整 型 。 

(float) Cdouble) 、(real) : 转换 成 浮 点 型 。 

(Cstring) : 转换 成 字符 串 。 

(bool) 、(boolean) : 转换 成 布尔 类 型 。 

Carray) : 转换 成 数组 。 

(Cobject) : 转换 成 对 象 。 

出 现在 字符 串 类 型 上 下 文 的 数值 类 型 会 被 强制 转换 为 字符 串 类 型 ,而 出 现在 数值 上 下 
文 的 字符 串 类 型 会 被 强制 转换 为 数值 类 型 。 如 果 字 符 串 中 含有 一 个 句号 .e 或 下 , 则 转换 为 
双 精 度 ,否则 转换 为 整数 。 如 果 字 符 串 的 第 一 个 字符 不 是 正 负 标 志 或 数字 , 则 转换 失败 , 返 
回 零 。 字 符 串 中 的 数字 后 面 的 非 数 字 会 被 忽略 掉 。 从 双 精 度 转换 为 整数 ,不 会 进行 四 舍 五 
入 ,直接 将 小 数 部 分 丢掉 。 

PHP 数据 类 型 有 3 种 显示 的 类 型 转换 方式 。 

第 一 种 方式 ,在 要 转换 的 变量 之 前 加 上 用 括号 括 起 来 的 目标 类 型 。 
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【 例 7-9】 基于 括号 的 强制 类 型 转换 方式 。 
第 1 步 , 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-9. php ,并 设置 为 索引 文件 。 
第 2 步 , 在 Ex7-9. php 中 添加 代码 : 


<HIML > 
< head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ numl = 3.14; 
$ num2 = (int) $ numl; 
$a=var dump( $ numl1); // 输 出 float(3.14) 
$ b=var dump( $ num2); // 输 出 int(3) 
echo $a; 
echo $b; 
?> 
</body> 
</HIML > 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 


float 3.14 
int 3 


其 中 ,函数 var_dump() 的 语法 为 
void var_dump ( mixed expression [,mixed expression [,…]] ) 


函数 var_dump() 用 于 判断 一 个 变量 的 类 型 与 长 度 ,并 输出 变量 的 数值 ,如 果 变 量 有 值 , 则 输 
入 的 是 变量 的 值 ,并 返回 数据 类 型 。 此 函数 显示 关于 一 个 或 多 个 表达 式 的 结构 信息 ,包括 表 
达 式 的 类 型 与 值 。 数 组 将 递归 展开 值 ,通过 缩 进 显示 其 结构 。 
echo 是 PHP 语句 ,print 和 print_r 是 函数 ,语句 没有 返回 值 ,函数 可 以 有 返回 值 (即便 
没有 用 )。print 只 能 打印 出 简单 类 型 变量 的 值 (如 int, string)。print_r 可 以 打印 出 复杂 类 
型 变量 的 值 (如 数组 ,对 象 ) 。 
第 二 种 转换 方式 ,使 用 intval() ,floatval() 或 strval() 函数 指定 显示 类 型 转换 。 
【 例 7-10】 基于 函数 的 强制 类 型 转换 方法 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-10. php, 并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-10. php 中 添加 代码 : 
<HITML > 
< head > 
< Meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ str = "123. 9abc"; 
$ int = intval( $ str); // 转 换 后 数值 : 123 
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$ float = floatval( $ str);  // 转 换 后 数值 : 123.9 
$ str= strval( $ float); // 转 换 后 字符 串 : "123.9" 
echo $ int,"<br/>", $ float, "<br/>", $ str; 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 


123 
123.9 
123.9 


第 三 种 使 用 通用 类 型 转换 函数 settype() 。 语 法 为 


settype(mixed var, string type) 


第 一 个 参数 var 为 需要 转换 的 变量 ,第 二 个 参数 type 为 指定 的 类 型 。 本 函数 用 来 配置 或 转 
换 变 量 类 型 。 成 功 返 回 True 值 ,其 他 情形 返回 False 值 。 

【 例 7-11】 基于 通用 类 型 转换 函数 的 强制 类 型 转换 方法 。 

第 1 步 ,在 PhpWebsite 项目 中 添加 新 PHP 文件 Ex7-11. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-11. php 中 添加 代码 : 


<HIML> 
<head> 
< Meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ num4 = 12.8; 
$ flg= settype( $ num4, "int"); 
$a=var dump( $ f1g); // 输 出 bool(true) 
$ b= var dump( $ num4); // 输 出 int(12) 
echo $ num4, $ flg; 
print "<br/> $ num4, $ flg< br/>"; 
Print_r( $ £1g); 
?> 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 


boolean true 
int 12 

121 

12,1 

1 


要 确定 一 个 变量 的 类 型 ,有 两 种 方法 : 第 一 种 方法 是 使 用 gettype() 函 数 , 其 语法 为 


string gettype(mixed var); 
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本 函数 用 来 取得 变量 的 类 型 。 返 回 的 类 型 字符 串 可 能 为 下 列 字符 串 之 一 : integer、 
double string ,array object .unknown type。 

另 一 种 确定 类 型 的 方法 是 使 用 一 个 或 多 个 类 型 判断 函数 ,这 些 函 数 以 变量 名 为 参数 并 
返回 一 个 布尔 值 。 判 断 整数 类 型 有 is_int() ,is_integer() 和 is_long(); 判断 双 精 度 的 函数 
有 is_double() ,is_float() 和 is_real(); 判断 布尔 类 型 的 函数 为 is_bool(); 判断 字符 串 类 型 
的 函数 为 is_string() 。 


7.3.4 算术 运算 和 关系 运算 


算术 运算 包括 加 (十 ) \ 减 (一 ) 、 乘 (x )、 除 (/) , 求 余数 (%)、 自 增 (十 十 )、 自 减 (一 一 ) 等 。 
例如 : 
一 $a, 取 反 运 算 , 表 示 $a 的 负 值 。 
$a 十 $b, 加 法 运算 ,表示 $a 和 $b 的 和 。 
$a 一 $b, 减法 运算 ,表示 $a 和 $b 的 差 。 
$a * $b, 乘 法 运算 ,表示 $a 和 $b 的 积 。 
$a / $b, 除 法 运算 ,表示 $a 除 以 $b 的 商 。 
$a % $b, 取 模 运 算 , 表 示 $a 除 以 $b 的 余数 。 





a= 20; 
a 二 十 // 21 
了 == 0 


除法 运算 符 总 是 返回 浮 点 数 。 只 有 下 列 情况 例外 : 两 个 操作 数 都 是 整数 (或 字符 串 转 
换 成 的 整数 ) 并 且 正 好 能 整除 ,这 时 它 返 回 一 个 整数 。 
取 模 运算 符 的 操作 数 在 运算 前 都 会 转换 成 整数 (除去 小 数 部 分 ) 。 
取 模 运算 符 % 的 结果 和 被 除数 的 符号 ( 正 负 号 ) 相 同 , 即 $a % $b 的 结果 和 $a 的 符号 
相同 。 
【 例 7-12】 正 负 号 的 被 除数 和 除数 取 模 运算 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-12. php, 并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-12. php 中 添加 代码 : 
<HTML> 
< head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
echo (5 % 3)."\n"; // prints 2 
echo (5 % —3)."\n"; // prints 2 
echo (—5 $% 3)."\n"; // prints -2 
echo (=5 %: —3),"\a"; // prints 一 2 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 


Ft 
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PHP 采用 了 JavaScript 的 8 种 关系 运算 符 。 常 用 的 6 种 (>\<、> 一 < 一 、! 一 和 一 一 ) 与 

平常 的 用 法 一 样 。 另 外 ,还 有 和 ! ,其 中 ， 运算 符 只 有 当 操作 数 是 同一 种 类 
型 并 且 值 相等 时 ,结果 才 为 True,1! 王 一 与 二 一 一 相反 。 
如 果 前 6 种 关系 运算 符 的 操作 数 的 类 型 不 相同 ,将 会 把 一 种 类 型 强制 转换 为 另 一 种 
类 型 。 
如 果 对 一 个 字符 串 和 一 个 数值 进行 比较 ,并 且 该 字符 串 可 以 转换 为 某 个 数值 (也 就 是 
说 , 它 是 数值 形式 的 字符 串 , 如 “42”) ,那么 ,该 字符 串 就 会 转换 为 数值 ,并 执行 数值 比较 
操作 。 
如 果 该 字符 串 不 能 转换 成 数值 ,就 把 数值 操作 数 转换 成 字符 串 , 并 执行 字符 串 比 较 
操作 。 
如 果 两 个 操作 数 都 是 可 以 转换 为 数值 的 字符 串 ,那么 两 者 都 会 转换 为 数值 并 执行 数值 
比较 操作 。 

有 时 这 并 不 是 想 要 的 结果 ,为 了 避免 这 种 情况 以 及 类 似 的 字符 串 与 数值 之 间 的 转换 问 
题 ,在 需要 比较 其 中 一 个 操作 数 或 两 个 操作 数 都 可 以 转换 为 数值 的 字符 串 操 作 数 时 ,可 以 使 
用 stremp 函数 代替 运算 符 。 











7.4 PHP 主要 语句 


7.4.1 赋值 语句 
给 变量 赋值 时 ,可 以 忽略 其 类 型 ,使 用 等 号 (= ) 给 变量 赋值 。 如 


$ number = 1; 
$ stringl = "Hello, world"; 


PHP 也 提供 算术 运算 符 和 赋值 运算 符 的 组 合 ,如 十 三 一 三、* 三 、/ 二 等 。 


$ num+= 5; // $num= $num+5; 

$ tax/ = 100; 

赋值 语句 就 是 PHP 变量 存储 了 一 个 值 , 假 设 在 一 个 叫做 zval 的 地 方 ,zval 结构 包含 了 
变量 的 类 型 . 值 和 两 个 附加 信 位 元 信息 。 

第 一 个 位 叫做 is_ref, 是 一 个 布尔 值 ,标识 了 这 个 变量 是 不 是 一 个 引用 类 型 ,通过 这 个 
位 元 ,PHP 引擎 了 解 了 这 个 变量 是 普通 类 型 的 变量 ,还 是 引用 类 型 的 变量 。PHP 可 以 通过 
地 址 符号 (&.) 操 作 让 用 户 获 得 一 个 引用 。 一 个 zval 容器 则 通过 一 个 叫做 引用 技术 的 机 制 
来 优化 内 存 的 占用 。 

附加 的 第 二 个 位 是 refcount, 包 含 了 有 多 少 变量 名 (这 里 叫做 symbols) 指 向 这 个 zval 
容器 。PHP 的 所 有 变量 符号 保存 在 一 个 叫做 符号 表 的 地 方 , 并 且 保存 每 一 个 变量 的 周期 和 
范围 。 范 围 包括 完整 的 周期 ,或 者 每 一 个 函数 或 方法 内 部 。 

当 一 个 变量 通过 一 个 常量 值 建 立 的 时 候 , 一 个 zval 容器 被 建立 。 例 如 : 

<?php 


$a= 'new string'; 
?> 
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在 上 例 中 ,一 个 新 的 符号 名 a 被 建立 在 当前 范围 内 (作用 域 ) ,并 且 建 立 了 一 个 类 型 为 
string, 值 为 new string 的 新 的 变量 容器 ,这 时 因为 目前 还 没有 一 个 用 户 建立 的 引用 指向 它 ， 
所 以 is_ref 默认 为 False,refcount 被 设置 为 1 ,表示 只 有 一 个 符号 被 用 于 这 个 变量 容器 。 注 
意 , 如 果 refcount 为 1, 则 is_ref 永远 为 False。 如 果 使 用 xdebug, 则 可 以 查看 相应 信息 。 

<?php 


xdebug_debug_zval('a'); 
和 


输出 结果 如 下 : 
a: (refcount =1,is ref =0) = 'new string' 
赋值 给 其 他 变量 名 ,将 增加 引用 计数 。 


<?php 

$a= 'new string'; 
$b= $a; 
xdebug_debug _zval('a'); 
?> 


输出 结果 : 
a:(refcount =2,is ref =0) = 'new string'" 


这 里 refcount 为 2, 因为 同一 个 变量 容器 连接 到 了 符号 “a” 和 “b”。 当 refcount 变 为 0 的 
时 候 ,变量 容器 将 被 摧毁 , 当 连 接 到 变量 容器 的 变量 符号 离开 作用 域 (如 函数 结束 ) 或 者 在 符 
号 表 上 调用 unset() 的 时 候 ,refcount 将 会 减少 1。 

【 例 7-13】 变量 容器 的 使 用 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-13. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-13. php 中 添加 代码 : 


<HTML> 
<head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
$a = 'new string'; 
Sc= $b= $a 
xdebug debug _zval('a'); 
unset( $b, $ c); 
xdebug_ debug _zval( 'a'); 
?> 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 
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a: (refcount =3,is ref = 0),string 'new string' (length= 10) 
a: (refcount =1,is ref=0),string 'new string' (length= 10) 


如 果 现在 调用 “unset(a) ;”, 则 变量 容器 (包括 内 部 的 值 和 类 型 ) ,将 会 从 内 存 中 移出 。 
7.4.2 输入 输出 语句 


PHP 有 3 种 输出 语句 ,深刻 理解 这 几 种 输出 方式 非常 重要 。 
1. print() 语 名 
print() 语 句 是 最 直接 的 输出 语句 ,其 语句 语法 为 


int print(string $ arg) 


该 语句 接收 一 个 字符 串 输 出 到 浏览 器 上 ,返回 一 个 整数 值 ,通常 为 1。 

2. echo() 语 句 

echo() 语 句 是 PHP 最 常 使 用 的 输出 语句 ,与 print() 的 区 别 在 于 ,可 以 接受 多 个 参数 。 
其 语句 语法 为 


void echo( string $ argl [,string $ …]) 


echo() 语 句 接收 的 多 个 参数 用 逗号 隔 开 ,所 有 参数 在 浏览 器 上 顺序 输出 ,返回 结果 为 
void。 因 为 echo() 还 是 语言 结构 ,所 以 括号 可 以 省 略 。 如 

<?php 

echo "Hello""World"; 

?> 

3. printf() 语 句 

printf() 语 名 可 以 产生 更 好 的 输出 ,用 于 定义 数据 的 格式 ,尤其 是 在 输出 数字 的 时 候 特 
别 有 用 。 

【语法 】 


int printf(string $ form at[,mixed $ args [,mixed $ …]]) 


一 个 函数 接受 混合 类 型 的 参数 ,意味 着 可 以 接受 几 个 参数 类 型 。 一 般 地 ,除了 数组 和 对 
象 外 的 数据 类 型 都 可 以 。 第 一 个 参数 中 可 以 包含 占 位 字符 串 : %s 表示 字符 串 ; %d 表示 参 
数 为 整数 ,并 输出 为 一 个 有 符号 的 十 进 制 数 ，%f 表示 参数 为 一 个 浮 点 数 , 并 输出 为 一 个 有 
符号 的 十 进 制 数 。 

【 例 7-14】 输出 语句 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-14. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-14. php 中 添加 代码 : 

<HIML> 

<head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
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SSs1=2.44; 

$s2=3.41; 

$ total= $sl+ $ s2; 

Printf ("Hello World, $% s","Welcome to here"); 
printf( 'the total cost is % .2f', $ total); 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 


Hello World, Welcome to herethe total cost is 5.85 


7.4.3 选择 语句 


PHP 中 的 让 语句 ,控制 表达 式 可 以 是 一 个 任意 类 型 的 表达 式 , 但 它 的 值 会 强制 转换 为 
布尔 值 。 被 控制 的 语句 段 可 以 是 单一 语句 ,也 可 以 是 复合 语句 。 一 个 {语句 可 以 包含 任意 
数量 的 elseif 子 句 。 下 面 是 让 结构 的 一 个 简单 示例 : 


If ($num> 0) 
$ pos_count++; 
elseif ($ num < 0) 
$ neg_count++; 
else { 
$ zero_count++; 
print "Another zero! <br/>"; 


} 

switch 语句 与 JavaScript 中 的 switch 语句 采用 相同 的 形式 和 语义 。 控 制 表达 式 和 case 
表达 式 的 类 型 可 以 是 整 型 . 双 精 度 或 者 字符 串 。 如 有 必要 ,case 表达 式 的 值 可 以 强制 转换 成 
控制 表达 式 的 类 型 ,以 便 进行 比较 。switch 请 句 中 可 以 包含 default 项 。 与 C 和 Java 等 语 
言 相 同 ,如 果 控 制 不 进入 后 面 的 语句 , 则 每 个 选择 项 中 必须 包括 一 条 break 语句 。 下 面 是 
switch 结构 的 简单 示例 : 


Switch ( $ bordersize) { 
case "0" : print "< table>"; 


break; 
case "1": print "< table border = ‘1’>"; 
break; 
case "4": print "< table border = ‘4’>"; 
break; 
case "8": print "< table border = ‘8’>"; 
break; 
default: print "Error - invalid value: $ bordersize <br />"; 


} 


7.4.4 ”循环 语句 


PHP 中 的 while ,for 和 do-while 语句 与 JavaScript 中 的 用 法 完全 相同 ,还 包含 foreach 
语句 。 
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【 例 7-15】 输入 一 个 数 ,计算 其 阶乘 。 
第 1 步 , 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-15. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-15. php 中 添加 代码 : 


<HIML> 

<head> 
<Meta charset = "UTF — 8"> 
<title></title> 

</head> 

<body> 
<form action="" method = "post"> 
输入 一 个 数 
< input type = "text" name = "num" size= "20"/> 
< input type = "submit" value = "提交 "/> 


</form> 
<?php 
$count = 1; 
$fact = 1; 
$n=0; 


if(isset( $ _POST[ ‘num'])&& $ _POST[ 'num']!= "') 
{ 
$n= $ _POST[ ‘num']; 
While ($count < $n) 
{ 
$ count = $count+1; 
$fact = $ count* $ fact; 
} 


echo $ fact; 
} 
?> 
</body> 
</HTML > 
第 3 步 ,运行 程序 ,在 文本 框 中 输入 4 ,输出 结果 如 下 : 
24 
用 for 语句 计算 阶乘 的 算法 。 
for ($count = 1,$fact = 1; $count< $n;){ 
$ count++; 


$ fact * = count; 
} 
【 例 7-16】 计算 小 于 等 于 100 的 正 整 数 之 和 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-16. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-16. php 中 添加 代码 : 
< HTML > 


< head> 
<Meta charset = "UTF — 8"> 
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<title></title> 
</head> 
< body> 
<?php 
$ count 1 


$ sum += $ count; 
$ count++; 
} while ($count <= 100); 
echo $ sum; 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,输出 结果 如 下 : 
5050 


break 语句 可 用 来 终止 for、foreach、while 或 do-while 结构 的 执行 。continue 语句 用 在 
循环 结构 中 来 跳 过 当前 迭代 的 剩余 部 分 ,但 还 需 回 到 循环 条 件 判 断 是 否 执 行 下 一 次 循环 。 

【 例 7-17】 混合 使 用 HTML 和 PHP. 展 示 了 HTML/PHP 文档 格式 ,以 及 一 些 简单 
的 数学 函数 的 用 法 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-17. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-17. php 中 添加 代码 : 


<!DOCTYPE HTML > 
<! -- powers. php 
Rn example to illustrate loops and arithmetic 
= 
<HIML lang = "en"> 
<head> 
<title> powers. php </title> 
<Meta charset = "utf -8" /> 
< style type = "text/CSS"> 
td, th, table {border: thin solid black;} 
</style> 
</head> 
<body> 
<table> 
< caption > Powers table </caption> 
<te> 
< th> Number </th> 
< th> Square Root </th> 
<th> Square </th> 
<th> Cube </th> 
<th> Quad </th> 
/Er 
<?php 
for ($number = 1; $number <=10; $ number++) { 
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$ root = sqrt ($ number); 
$ square = pow ( $ number, 2); 
$ cube = pow ($ number, 3); 
$ quad = pow ( $ number, 4); 


print ("<tr align = 'center> <td> $ number </td>"); 


print ("<td> $ root </td> <td> $ square 


Powers table 


</td>"); Number Square Root SquareCube Quad 

2 1 1 1 ek 

print ("<td> $cube </td> <td> $ quad </ i ee 

td> </tr >"); 3 1.7320508075689 9 27 81 
} 4 2 16 64 256 

Bs 5 2.2360679774998 25 125 625 
6 2.4494897427832 36 216 1296 
</table> 7 2.6457513110646 49 343 2401 
</body> 8 2.8284271247462 64 512 4096 
i 9 3 81 729 6561 
10 3.1622776601684 100 1000 10000 

第 3 步 ,运行 程序 ,输出 结果 如 图 7-19 所 示 。 图 7-19 运行 结果 


7.5 数 组 


数值 和 字符 串 都 是 只 有 单独 的 元 素 , 而 数组 是 同 种 类 型 变量 组 成 的 多 个 数值 的 集合 。 
使 用 数组 ,可 以 多 元 素 的 集合 进行 添加 新 元 素 、 排 序 和 搜索 等 功能 。 数 组 同 其 他 单元 素 变 量 
一 样 ,也 需要 有 名 称 , 且 命 名 规则 相同 。 数 组 的 每 个 元 素 都 对 应 一 个 索引 (index) ,数组 的 值 


可 以 通过 索引 用 , 且 索 引 可 以 是 数值 或 字符 串 。 
7.5.1 数组 的 创建 
创建 数组 的 正式 方法 是 使 用 array() 函 数 ,如 


$list = array('apple' 'watermelon', 'orange'); 


数组 的 索引 默认 从 0 开始 , $list 中 apple, watermelon ,orange 的 索引 分 别 为 0,1,2。 
如 果 需 要 改变 默认 的 序号 ,可 以 在 array() 函 数 中 用 符号 "二 >” 赋 予 索引 值 ,如 


$ list = array(1 =>'apple', 2=>'watermelon', 3 =>'orange'); 


索引 值 除了 使 用 数字 ,还 可 以 用 更 有 意义 的 字符 串 定义 ,如 
$list = array('ap' =>'apple', wa' =>'watermelon', 'or' =>'orange'); 


如 果 使 用 array() 函数 定义 数组 索引 ,可 以 指定 第 一 个 元 素 的 索引 ,其 他 元 素 的 索引 将 


延续 第 一 个 元 素 的 索引 值 ,如 
$ list = array(1 =>'apple', 'watermelon', 'orange'); 


现在 ,watermelon 和 orange 的 索引 分 别 为 2 和 3。 


【 例 7-18】 创建 一 个 索引 从 0 开始 的 数组 $a, 创建 一 个 索引 从 1 开始 的 数组 $b, 创 建 


一 个 用 字符 串 作 为 索引 的 数组 $c, 并 显示 它们 的 值 。 


第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-18. php, 并 设置 为 索引 文件 。 


222 。 web 系统 与 技术 





第 2 步 , 在 Ex7-18. php 中 添加 代码 : 


<HIML> 

<head > 
< Meta charset = "UTF — 8"> 
<title></title> 

</head> 

<body> 
<?php 
$ a=array('apple', 'watermelon', 'orange'); 
print "<p> $a</p>"; 


print r( $a); // print r 可 以 显示 任何 变量 的 内 容 和 结构 


$b=array(1=>'apple',2 =>'watermelon', 3 =>'orange'); 
print "<p> $b</p>"; 
print _r( $b); 


$ c=array('ap'=>'apple', wa' =>'watermelon', 'or' =>'orange'); 
print "<p> $c </p>"; 
print r( $c); 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,得 到 如 图 7-20 所 示 的 结果 。 
Array 
Array ( [0] => apple [1] 一 watermelon [2] => orange ) 
Array 
Array ( [1] => apple [2] => watermelon [3] => orange ) 
Array 


Array ( [ap] => apple [wa] => watermelon [or] => orange ) 


图 7-20 运行 结果 


7.5.2 数组 访问 
从 数组 中 检索 特定 的 元 素 , 只 能 通过 索引 访问 。 如 果 索 引 是 数字 , 则 直接 访问 ,如 
print "the first element of array a is $ list[ 'ap’]"; 
为 了 解决 这 个 问题 ,可 以 用 “{ }” 符 号 将 整个 数组 括 起 来 ,如 
print "the first element of array a is { $ list['ap’]}"; 
如 果 索 引 是 字符 串 ,需要 用 引号 ,但 必须 调整 引号 的 使 用 ,否则 会 与 print 语法 冲突 ,如 
Print "<p>I want some $a[</p>"; 


访问 数组 的 所 有 元 素 ,最 快捷 的 方式 是 使 用 foreach 循环 语句 ,如 
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foreach( $ listas $k=>$v) 
{ 

print "<p> the key is $ k,and the value is $v</p>"; 
} 


如 果 只 需要 访问 一 个 数组 的 值 ,而 不 是 它 的 键 ,可 以 使 用 foreach 循环 语句 ,如 


foreach( $ listas $v) 
L 
print "<p> the value is $v</p>"; 


} 


【 例 7-19】 数组 遍历 实例 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-19. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-19. php 中 添加 代码 ， 


< HTML > 

<head > 
<Meta charset = "UTF - 8"> 
<title></title> 

</head> 

<body> 
<?php 
$a = array(1,2,3,17); 
foreach ( $aas $v) 
{ 

echo "Current value of ". $a.:". $v."<br />"; 
} 

$ str = array( 'apple', ‘watermelon', 'orange'); 
foreach( $ stras $k=>$v) 
{ 
print "<p> the key is $ k,and the value is $v</p>"; 
} 
?> 

</body> 

</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 


Current value of Array:1 

Current value of Array:2 

Current value of Array:3 

Current value of Array:17 

the key is 0,and the value is apple 

the key is 1,and the value is watermelon 
the key is 2,and the value is orange 


7.5.3 数组 常见 操作 


1. 添加 元 素 操作 
在 PHP 创建 一 个 数组 后 ,可 以 使 用 “二 ”符号 向 这 个 数组 中 添加 新 的 元 素 ,可 以 同时 为 
所 添加 的 元 素 添加 索引 或 不 添加 索引 ,但 都 需要 将 数组 用 “[j" 符 号 引用 ,如 
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$1ist[] = "pear' 
$1ist[] = 'pea'; 


如 果 不 使 用 “[]" 符 号 , 则 添加 的 值 将 会 代替 这 个 数组 ,如 
$ list = 'pear'; 
如 果 指 定 了 索引 ,那么 它 的 值 将 被 指定 为 相应 的 位 置 ,任何 已 经 存在 的 值 都 会 被 覆盖 ,如 


$1ist[3] = 'pear'; 

$1ist[4] = 'pea'; 

如 果 索 引 是 字符 串 ,需要 指定 新 添加 元 素 的 索引 ,否则 可 能 会 出 现 奇怪 的 字符 。 

【 例 7-20】 先 创 建 一 个 数组 $a, 然 后 向 $a 中 添加 2 个 元 素 ,并 显示 添加 元 素 的 前 后 





第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-20. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-20. php 中 添加 代码 : 


<HTML > 
<head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
$a=array('apple', watermelon', 'orange'); 
$ countl = count( $a); 
Print "<p>array a has $ countl elements </p>"; 
print "<p> $a</p>"; 
print r( $a); 
$a[]= 'pear'; 
$al]= 'pea'; 
$ count2 = count( $ a); 
Print "<p>array a has $ count2 elements </p>"; 
print "<p> $a</p>"; 
Print_r( $a); 


第 3 步 ,运行 程序 ,结果 如 下 : 


array a has 3 elements 

Array 

Array ( [0] => apple [1] => watermelon [2] => orange ) 

array a has 5 elements 

Array 

Array ( [0] => apple [1] => watermelon [2] => orange [3] => pear [4] => pea ) 


2. 合并 数组 


array_merge() 函 数 将 数组 合并 到 一 起 ,返回 一 个 联合 的 数组 。 所 得 到 的 数组 从 第 一 个 
输入 数组 参数 开始 , 按 后 面 数 组 参数 出 现 的 顺序 依次 追加 。 其 形式 为 
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array array_merge (arrayl,array2, … ,arrayN) 


这 个 函数 将 一 个 或 多 个 数组 的 单元 合并 起 来 ,一 个 数组 中 的 值 附 加 在 前 一 个 数组 的 后 
面 ,返回 作为 结果 的 数组 。 
如 果 输 入 的 数组 中 有 相同 的 字符 串 键 名 , 则 该 键 名 后 面 的 值 将 覆盖 前 一 个 值 。 然 而 ,如 
果 数 组 包含 数字 键 名 ,后 面 的 值 将 不 会 覆盖 原来 的 值 ,而 是 附加 到 后 面 。 
如 果 只 给 了 一 个 数组 并 且 该 数组 是 数字 索引 的 , 则 键 名 会 以 连续 方式 重新 索引 。 
【 例 7-21】 合并 两 个 数组 ,并 显示 结果 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-21. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-21. php 中 添加 代码 : 
<HITML > 
< head> 
<Meta charset = "UTF 一 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ fruits = array("apple", "banana", "pear"); 
$ numbered = array("1","2","3"); 
$ cards = array merge( $ fruits, $ numbered); 
print_r( $ cards); 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 
Array ( [0] => apple [1] => banana [2] => pear [3] =>1 [4] =>2 [5] =>3) 


3. 追加 数组 

array_merge_recursive() 函数 与 array_merge() 函数 相同 ,可 以 将 两 个 或 多 个 数组 合并 
在 一 起 ,形成 一 个 联合 的 数组 .两 者 之 间 的 区 别 在 于 , 当 某 个 输入 数组 中 的 某 个 键 已 经 存在 
于 结果 数组 中 时 ,该 函数 会 采取 不 同 的 处 理 方式 。array_merge() 会 覆盖 前 面 存在 的 键 / 值 
对 ,替换 为 当前 输入 数组 中 的 键 / 值 对 ,而 array_merge_recursive() 将 把 两 个 值 合 并 在 一 起 ， 
形成 一 个 新 的 数组 ,并 以 原 有 的 键 作为 数组 名 。 还 有 一 个 数组 合并 的 形式 ,就 是 递归 追加 数 
组 。 其 形式 为 


array array_merge_recursive(array arrayl, array array2[ … ,array arrayN]) 


【 例 7-22〗 合并 两 个 数组 ,并 显示 结果 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-22. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-22. php 中 添加 代码 : 
<HIML > 
< head > 


<Meta charset = "UTF 一 8"> 
<title></title> 
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</head> 

<body> 
<?php 
$ fruitl = array("apple" => "red","banana" => "yellow"); 
$ fruit2 = array("pear” => "yellon","apple"” => "green"); 
$result = array merge recursive( $ fruitl, $ fruit2); 
print r( $ result); 


第 3 步 ,运行 程序 ,结果 如 下 : 
Array ( [apple] => Array ( [0] => red [1] => green ) [banana] => yellow [pear] => yellow ) 


4. 数组 的 交集 array_intersect() 
array_intersect() 函 数 返 回 一 个 保留 了 键 的 数组 ,这 个 数组 只 由 第 一 个 数组 中 出 现 的 且 
在 其 他 每 个 输入 数组 中 都 出 现 的 值 组 成 。 其 形式 如 下 : 


array array_intersect(array arrayl, array array2[,arrayN… ]) 


【 例 7-23】 返回 在 $fruitl 数组 中 出 现 的 , 且 在 $fruit2 和 $fruit3 中 也 出 现 的 所 有 的 
水 果 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-23. php, 并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-23. php 中 添加 代码 : 


<HTML > 
<head > 
<Meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ fruitl = array("Apple", "Banana", "Orange"); 
$ fruit2 = array("Pear", "Apple", "Grape"); 
$ fruit3 = array("Watermelon","Orange","Apple"); 
$ intersection = array intersect( $ fruitl, $ fruit2, $ fruit3); 
print_r( $ intersection); 
?> 
</body> 
</HIML> 


第 3 步 , 运 行程 序 , 结 果 如 下 : 

Array ( [0] => Apple ) 

只 有 两 个 元 素 相 等 且 具 有 相同 的 数据 类 型 时 ,array_intersect() 函 数 才 会 认为 它们 是 相 
同 的 。 

5.in_array() 国 数 


in_array() 函 数 在 一 个 数组 汇总 搜索 一 个 特定 值 ,如 果 找 到 这 个 值 ,就 返回 True, 和 否则 
返回 False。 其 形式 如 下 : 
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boolean in array(mixed needle,array haystack[, boolean strict]); 


【 例 7-24】 查找 变量 apple 是 否 已 经 在 数组 中 ,如 果 在 , 则 输出 一 段 信息 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-24. php, 并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-24. php 中 添加 代码 : 


<HTML > 
<head > 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ fruit = "apple"; 
$ fruits = array("apple", "banana", "orange", "pear" ); 
if(in array( $ fruit, $ fruits)) 
echo " $ fruit 已 经 在 数组 中 "; 
?> 
</body> 
</HTML 


第 3 步 ,运行 程序 ,结果 如 下 : 
apple 已 经 在 数组 中 


6. 从 数组 尾 删除 元 素 
array_pop() 天 数 删除 并 返回 数组 的 最 后 一 个 元 素 。 其 形式 为 


mixed array_pop(aray target_array) ; 


【 例 7-25】〗 从 $ states 数组 删除 了 最 后 一 个 元 素 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-25. php, 并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-25. php 中 添加 代码 : 


<HTML > 
< head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
$ fruits = array("apple", "banana", "orange", "pear"); 
$ fruit = array pop( $ fruits); 
print r( $ fruits) ; 
print_r("< br/> the deleted element is ". $ fruit) ; 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 


Array ( [0] => apple [1] => banana [2] => orange ) 
the deleted element is pear 
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7.6 函 数 


PHP 的 模块 化 程序 结构 都 是 通过 函数 或 对 象 实现 的 ,函数 则 是 将 复杂 的 PHP 程序 分 
为 若干 个 功能 模块 ,每 个 模块 都 编写 成 一 个 PHP 函数 ,然后 通过 在 脚本 中 调用 函数 ,以 及 
在 函数 中 调用 函数 实现 一 些 大 型 问题 的 PHP 脚本 编写 。 使 用 函数 的 优越 性 包括 : 提高 程 
序 的 重用 性 ; 提高 软件 的 可 维护 性 ; 提高 软件 的 开发 效率 ; 提高 软件 的 可 靠 性 ; 控制 程序 
设计 的 复杂 性 。 


7.6.1 常见 函数 


PHP 的 函数 分 为 系统 函数 和 用 户 自 定义 函数 两 类 。PHP 定义 的 系统 函数 十 分 丰富 ， 
多 达 162 个 函数 库 , 用 于 162 个 方面 的 处 理 。 常 用 函数 包括 : 数组 函数 库 、 变 量 函 数 库 、 字 
符 串 处 理 函数 库 .MySQL 函数 库 .时 间 日 期 函数 库 .HTTP 相关 函数 库 、 数 学 函数 库 。 数 组 
函数 库 ,变量 函 数 库 中 的 常用 函数 已 经 在 前 面 介绍 ,下 面 介绍 其 余 函 数 库 中 常用 的 函数 。 

1. 字符 串 处 理 函 数 库 

int strlen (字符 串 名 ) ,得 到 字符 串 的 长 度 。 

substr() ,截取 子 串 。 使 用 形式 : string substr (string $ str,int start [ ,int length]) 。 
如 果 start 是 负数 ,将 从 母 串 的 末尾 开始 反 向 截取 。 

【 例 7-26】 substr() 基 本 用 法 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-26. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-26. php 中 添加 代码 : 


<HIML> 
<head> 
< Meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
<?php 
echo substr( 'abcdef',1). "< br/>"; 
echo substr( 'abcdef',1,3)."< br/>"; 
echo substr( 'abcdef', 0,4). "< br/>"; 
echo substr( 'abcdef', 0,8). "< br/>"; 
echo substr( 'abcdef', —1,1)."<br/>"; 
echo substr("abcdef", -1)."<br/>"; 
echo substr("abcdef", — 2). "< br/>"; 
echo substr("abcdef", -3,1); // 
?> 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,结果 如 下 : 


bcdef 
bcd 


第 7 章 PHP 编程 229 





ord() , 取 字 符 的 ASCII 码 ,使 用 形式 为 int ord ( string string) 。 

str(), 取 ASCII 码 对 应 的 字符 ,使 用 形式 为 string chr ( int ascii) 。 

trim() ,去 掉 串 首 串 尾 的 空格 ,使 用 形式 为 string trim ( string str) 。 

ltrim() ,去 掉 串 首 的 空格 ,使 用 形式 为 string ltrim ( string str) 。 

rtrim() ,去 掉 串 尾 的 空格 ,使 用 形式 为 string rtrim ( string str) 。 

explode() ,将 字符 串 拆 分 成 数组 ,使 用 形式 为 array explode(string separator, string 
string)。 此 函数 返回 由 字符 串 组 成 的 数组 ,每 个 元 素 都 是 string 的 一 个 子 串 ,它们 被 字符 串 
separator 作为 边界 点 分 割 出 来 。 如 果 separator 为 空 字符 串 ("") ,explode() 将 返回 False。 
如 果 separator 包含 的 值 在 string 中 找 不 到 ,那么 explode() 将 返回 包含 string 单个 元 素 的 
数组 。 

【 例 7-27】〗 explode() 示 例 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-27. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-27. php 中 添加 代码 : 


<HTML > 

<head > 
<Meta charset = "UTF - 8"> 
<title></title> 

</head> 

<body> 
<?php 
$ pizza = "piecel piece2 piece3 piece4 piece5 piece6"; 
$pieces = explode("", $ pizza);  // 注 意 ,这 里 用 空格 作为 分 隔 符 ,而 不 是 空 字符 串 


echo $ pieces[0]."<br/>"; // piecel 
echo $ pieces[1]."<br/>"; // piece2 
print _r( $ pieces); 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 


piecel 

piece2 

Array ( [0] => piecel [1] => piece2 [2] => piece3 [3] => piece4 [4] => piece5 [5] => piece6 
3 


implode() 将 数组 元 素 连 成 字符 串 , 使 用 形式 为 string implode (string glue, array 


pieces) 。 
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【 例 7-28】 implodeQO 〇 示例 。 
第 1 步 , 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-28. php ,并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-28. php 中 添加 代码 : 


<HIML> 
<head> 
< Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
$array = array('lastname', 'email', 'phone'); 
$ comma_separated = implode(",", $ array); 
echo $ comma separated; 
?> 
</body> 
</HIML> 


第 3 步 ,运行 程序 ,结果 如 下 : 
lastname, email, phone 


2. 时 间 日 期 函数 库 
date() ,格式 化 一 个 本 地 时 间 / 日 期 ,使 用 形式 为 string date(string form at) ,常用 格式 
字符 串 (form at) 见 表 7-2。 与 date() 具 有 类 似 功能 的 函数 是 getdate() 。 


表 7-2 常用 格式 字符 串 (form at) 





























form at 说 明 返回 值 例子 
下 4 位 数字 年 份 例如 : 1999 或 2003 
y 2 位 数字 年 份 例如 : 17 
m 2 位 数字 月 份 01~12 
d 2 位 数字 月 份 中 的 第 几 天 ,01~31 
h 2 位 数字 小 时 24 小 时 格式 ,00 一 23 
i 2 位 数字 分 钟 00~59 
s 2 位 数字 秒 00~59 


【 例 7-29】 获取 当前 时 间 , 用 不 同 格式 显示 。 
第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-29. php, 并 设置 为 索引 文件 。 
第 2 步 ,在 Ex7-29. php 中 添加 代码 : 


<HTML > 

<head > 
<Meta charset = "UTF — 8"> 
<title></title> 

</head> 

<body> 

<?php 

$ today = date("ynd"); 
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echo $ today. "< br/>"; 

$ todayY = date("Ymd"); 

echo $ todayY. "< br/>"; 

$time = date("H:i:s"); 

echo $ time. "< br/>"; 

$ todaytimel = date("Ymd, H:i:s"); 
echo $ todaytimel. "< br/>"; 

$ todaytime2 = date("Y—- m—d,H:i:s"); 
echo $ todaytime2."< br/>"; 

$ todaytime3 = date("Y 年 m 月 d 日 ,H 时 :i 分 :s 秒 "); 
echo $ todaytime3; 

?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 


170723 

20170723 

08:10:51 

20170723, 08:10:51 

2017- 07- 23,08:10:51 

2017 年 07 月 23 日 ,08 时 :10 分 :51 秒 

3. HTTP 相关 函数 库 

header(string) 函 数 , 向 浏览 器 发 出 头 信 息 。 在 HTTP 中 ,服务 器 端的 回答 (response) 
内 容 包括 两 部 分 : 头 信息 (header) 和 体内 容 ,这 里 的 头 信息 不 是 HTML 中 的 < head > 
</head > 部 分 ,同样 ,体内 容 也 不 是 < BODY >< /BODY >。 头 信息 是 用 户 看 不 见 的 ,里 面包 
含 了 很 多 项 ,包括 : 服务 器 信息 日期、 内容 的 长 度 等 。 体 内 容 就 是 整个 HTML, 也 就 是 用 
户 能 看 见 的 全 部 页 面 。 

header() 函数 需要 在 输出 流 中 增加 头 信 息 , 但 是 头 信息 只 能 在 其 他 任何 输出 内 容 之 前 
发 送 。 使 用 这 些 函 数 前 不 能 有 任何 (如 HTML) 输 出 。 从 PHP 4.4 之 后 ,该 函数 防止 一 次 
发 送 多 个 报头 。 这 是 对 头 部 注入 攻击 的 保护 措施 。 

如 果 PHP 程序 中 需要 输出 HTML 前 ,也 需要 使 用 header() 函 数 ,那么 ,要 先 用 header() 
函数 输出 所 有 的 头 信息 , 和 否则 会 出 错 。 头 信息 参数 string 的 形式 : 常见 的 头 信息 有 下 
面 3 种 之 一 :并 只 能 出 现 一 次 。 


Location: URL 
Content-Type: xxxx/yyyy; 如 果 头 信息 中 指定 Content-type: application/xml, 浏 览 器 会 将 


其 按照 XML 文件 格式 解析 。 如 果 头 信息 中 是 Content-type: text/xml, 浏 览 器 就 会 将 其 看 
作 纯 文本 解析 。 


Status : nnn COoOCX. 
header( "Location:URL") 


【 例 7-30】 服务 器 直接 向 浏览 器 发 送 一 个 网 络 地 址 为 URL 的 页 面 。 
第 1 步 . 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-30. php ,并 设置 为 索引 文件 。 
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第 2 步 , 在 Ex7-30. php 中 添加 代码 : 


<HTML> 
<head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
Header("Location: http://www.baidu. com"); 
exit; 
Pe 
</body> 
</HTML> 


第 3 步 ,运行 程序 ,结果 为 打开 百度 公司 的 网 页 。 

例 7-3 的 作用 类 似 于 JavaScript 的 window. location 王 URL, 但 后 者 是 浏览 器 向 URL 
中 的 服务 器 请 求 这 个 URL ,该 服务 器 收 到 这 个 请 求 后 ,将 该 服务 器 上 地 址 为 URL 的 页 面 返 
回 给 浏览 器 ,整个 过 程 是 请 求 -响应 (两 段 ) ,前 者 仅 响 应 (一 段 ) 。 

【 例 7-31】 提示 用 户 保 存 一 个 生成 的 PDF 文件 (Content-Disposition 报头 用 于 提供 一 
个 推荐 的 文件 名 ,并 强制 浏览 器 显示 保存 对 话 框 ) 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-31. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-31. php 中 添加 代码 : 


<HTML> 
< head> 
<Meta charset = "UTF 一 8"> 
<title></title> 
</head> 
<body> 
<?php 
header ("Content - type:application/pdf"); 
// 文件 将 被 称 为 downloaded. pdf 
header( "Content - Disposition:attachment; filename = downloaded. pdf" ); 
// PDF 源 在 paper.pdf 中 
readfile("paper. pdf" ); 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,弹出 如 图 7-21 所 示 的 对 话 框 ,保存 文件 。 
要 打开 成 保存 来 自 localhost 的 'downloaded pdf 三? #0) || 保存 G) | | WHO | x 
7-21 运行 结果 


4. 数学 函数 库 
floor() 向 下 取 整 ,使 用 形式 : float floor (float value) ,返回 不 大 于 value 的 下 一 个 整数 ， 
将 value 的 小 数 部 分 舍 去 取 整 ,返回 的 类 型 仍然 是 float 。 
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ceil() 向 上 取 整 ,使 用 形式 : float ceil (float value) ,返回 不 小 于 value 的 下 一 个 整数 ， 
value 如 果 有 小 数 部 分 , 则 进 一 位 ,返回 的 类 型 仍然 是 float 。 

abs(z) ,返回 参数 z 的 绝对 值 。 如 果 参 数 x 是 float, 则 返回 的 类 型 也 是 float ,否则 返回 
integer。 

fmod(Cz,y) ,返回 除法 的 浮 点数 余 数 。 返 回 被 除数 (z) 除 以 除数 (y) 所 得 的 浮 点 数 余数 ， 
余数 (x) 的 定义 是 : z=i * y 十 7, 其 中 i 是 整数 ,如 果 y 是 非 零 值 , 则 ~ 和 z 的 符号 相同 ,并 
且 其 数量 值 小 于 y。 

log10(x) ,返回 参数 工 以 10 为 底 的 对 数 。 

log(Cz,base) ,如 果 指 定 了 可 选 的 参数 base,log() 返 回 logbasex, 否则 log() 返 回 参 数 
工 的 自然 对 数 。 


7.6.2 自 定义 函数 


PHP 中 函数 的 定义 和 使 用 不 需要 考虑 先后 关系 ,在 调用 也 数 之 前 或 之 后 定义 函数 都 可 
以 。PHP 中 函数 不 允许 重 载 , 不 能 重复 定义 ,否则 PHP 脚本 会 报错 。PHP 中 的 函数 可 以 
嵌 套 定义 。 特 别 说 明 的 是 , PHP 函数 名 是 不 区 分 大 小 写 的 ,函数 sum() 和 Sum() 是 同一 个 
函数 定义 。 函 数 的 返回 值 通过 Return 语句 指定 返回 。 当 遇 到 return 语句 或 执行 完 函 数 的 
最 后 一 条 语句 时 ,函数 执行 结束 ,控制 返回 给 调用 者 。 如 果 没有 return 语句 ,函数 将 不 返回 
任何 值 。 

自 定义 函数 的 语法 : 

function FuncName( [Parameters]) 


{ 


' 


函数 的 参数 LParametersj 是 可 选 的 ,可 以 是 空 参数 ,但 括号 不 能 省 略 。 函 数 定义 中 的 参 
数 叫 形式 参数 ,简称 形 参 , 形 参 必须 是 变量 名 。 函 数 调用 时 的 参数 叫做 实际 参数 ,简称 实 参 ， 
实 参 可 以 是 任意 表达 式 。PHP 支持 参数 的 数目 可 变 , 即 函数 调用 中 的 实 参 数目 不 一 定 要 与 
函数 定义 中 的 形 参 数目 一 致 ,如 果实 参 的 数目 少 于 形 参 的 数目 , 则 未 对 应 的 形 参 将 为 未 绑 定 
的 变量 。 如 果实 参 的 数目 多 于 形 参 的 数目 ,多 出 来 的 参数 将 会 被 忽略 。 

【 例 7-32】 假设 函数 定义 为 全 ,函数 调用 采用 实 参 数目 分 别 为 1、2 和 3。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-32. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-32. php 中 添加 代码 : 


Function f1( $al, $a2) 
{ 
Return $al+ $a2; 
}< HTML > 
<head > 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 
function f1( $a, $b) 
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{ 

return $a+ $b; 
$ 
echo f1(1)."<br />"; 
echo £1(3,4)."<br />"; 
echo f1(1,2,3); 


第 3 步 ,运行 程序 ,结果 如 下 : 


1 
7 
3 


如 果 函 数 调 用 为 


$ans=f£1(10); // 实 参 10 传 给 形 参 $ al 

$ans= £1(10,20); // 实 参 10 传 给 形 参 $ al, 20 传 给 形 参 $ a2 

$ ans = fl(10,20,30); // 实 参 10 传 给 形 参 $ al, 20 传 给 形 参 $ a2, 30 被 忽略 

PHP 的 参数 传递 机 制 包 括 按 值 传递 和 按 地 址 传递 两 种 ,默认 是 按 值 传递 。 按 值 传递 方 
式 , 实 参 的 值 被 复制 到 对 应 的 形 参 的 内 存 中 , 形 参 的 值 永远 不 会 复制 回 形 参 ,是 单 向 传 值 。 
有 时 需要 参数 能 够 在 调用 者 和 函数 之 间 实 现 双 向 传 值 ,如 需要 在 一 个 函数 中 返回 两 个 或 两 
个 以 上 的 值 ,就 需要 双向 传 值 。 双 向 传 值 需要 通过 地 址 传递 来 实现 ,又 被 称 为 按 引 用 传递 。 
当然 , 按 引用 传递 时 , 实 参 只 能 是 变量 ,不 能 是 常数 或 表达 式 。 按 引用 传递 可 以 在 函数 定义 
的 形 参 变量 前 加 一 个 与 符号 (&.) ,或 在 函数 调用 的 实 参 变量 前 加 一 个 与 符号 (&)。 

假设 函数 定义 为 f2, 函 数 调用 采用 引用 方式 。 

Function f2(&$ al, $a2) 

{ 

$al= $al+1; 


Return $al+ $a2; 
} 


函数 调用 为 


$ bl=10; 

$ b2=10; 

$ ans= £2( $b1); // $bl=11, $ans=21 

函数 中 定义 的 变量 的 默认 作用 域 是 局 部 作用 域 。 如 果 函 数 定义 的 一 个 变量 与 该 函数 外 
的 变量 同名 ,就 不 会 产生 冲突 。 非 局 部 变量 会 被 同名 的 局 部 变量 隐藏 ,一 个 局 部 变量 只 在 使 
用 它 的 函数 范围 内 有 效 。 


7.7 PHP 表单 


PHP 主要 用 于 动态 网 页 的 开发 。 动 态 网 页 最 显著 的 一 个 特点 是 要 实现 良好 的 人 机 交 
互 功 能 。 对 用 户 输入 或 者 选择 的 内 容 能 做 出 相应 的 回应 。 这 也 是 动态 网 页 区 别 于 静态 网 页 
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的 一 大 特征 。 对 于 其 他 的 CGI 等 动态 技术 ,同样 也 具备 这 种 良好 的 人 机 交互 功能 。 人 机 交 
互 一 般 通过 两 种 方式 : 一 种 方式 是 采用 表单 ,通过 表单 选项 或 者 输入 不 同 的 内 容 , 返 回 不 同 
的 结果 ; 另 一 种 方式 是 采用 URL 地 址 加 上 各 种 参数 实现 互动 ,参数 不 同 ,返回 的 内 容 也 
不 同 。 

表单 数据 的 提交 有 两 种 方式 , 即 通过 GET 方法 或 POST 方法 。 通 过 GET 方法 时 , 表 
单数 据 被 当 作 URL 的 一 部 分 一 起 传 过 去 。 格 式 如 下 : 


http://url?namel = valuel&name2 = value2..... 


其 中 ,url 为 表单 响应 地 址 ,如 localhost: 8080/hello. php。name 为 表单 元 素 的 名 称 , 如 
<input type 一 "text" name 一 "user">, 这 里 name 的 属性 值 就 是 user, 通 过 name 值 可 以 获 
取 value 的 属性 值 。value 为 表单 元 素 的 值 , 如 < input type 一 "text" name 一 "user" value 一 
"eduask"> 表 示 名 字 为 user 的 text 表单 元 素 的 值 为 eduask。url 和 表单 元 素 之 间 用 “?” 隔 
开 , 而 多 个 表单 元 素 之 间 用 “&" 隔 开 。 

GET 方法 最 大 的 缺点 , 即 它 的 信息 显示 在 客户 端 浏览 器 上 ,存在 数据 不 安全 的 隐患 ,而 
且 URL 本 身受 长 度 限制 (1024KB) ,不 能 传输 较 大 的 数据 。 传 输 的 数据 较 大 时 可 以 选择 
POST 方法 。 

使 用 POST 方法 时 将 < form > 表单 中 的 属性 method 设置 成 POST 即 可 。POST 方法 
不 依赖 URL, 所 有 提交 的 信息 在 后 台 传 输 , 不 会 显示 在 地 址 栏 , 安 全 性 高 ,而 且 没 有 长 度 限 
制 。 在 PHP 中 接收 的 表单 变量 ,只 是 影响 页 内 数据 。$ _POST/GET[L ] 变 量 属于 自动 变 
量 , 它 的 值 随 页 面 的 更 新 而 更 新 。 也 就 是 说 , 当 响 应 页 刷新 或 再 次 请 求 其 他 页 面 时 ,从 上 一 
个 页 面 接收 的 $_POST/GET[] 变 量 会 消失 ,如 果 同 时 又 接收 了 新 的 表单 变量 , $ _POST/ 
GETL[ Jj 会 自动 添加 或 覆盖 。 

【 例 7-33】 一 个 简单 的 HTML 表单 ,包含 两 个 输入 字段 和 一 个 提交 按钮 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-33. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-33. php 中 添加 代码 : 

<HTML > 

<body> 

< form action = "welcome. php" method= "post"> 

Name: < input type = "text" name = "name">< br > 

卫 - mail: < input type = "text”name = "email">< br> 

< input type = "submit"> 

</form> 

</body> 

</HTML> 

第 3 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-33-1. php。 

第 4 步 , 在 Ex7-33. php 中 添加 代码 : 

<HITML > 

<body> 

Welcome 


<?php 
echo $ _POST["name"]; 
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?> 
<br> 


Your email address is: 
































<?php 

echo $ _POST["email"]; 

> Name; | 张 三 

</body> E-mail: [zhangsécsls. edu. cn 
了 ED 

第 5 步 ,运行 程序 ,提交 内 容 如 图 7-22 所 示 。 因 722 相交 内 时 
单 击 “ 提 交 查 询 内 容 ” 按 钮 后 ,输出 结果 为 

Welcome 张 三 


Your email address is: zhangs@cslg. edu. cn 


7.8 Cookie 和 Session 


7.8.1 PHP 的 Cookie 


Cookie 是 Web 服务 器 通过 其 页 面 的 程序 写 到 浏览 器 所 在 计算 机 硬盘 上 的 一 个 数据 文 
件 。 服 务 器 可 以 利用 Cookies 包含 信息 的 任意 性 来 筛选 并 经 常 性 维护 这 些 信 息 , 以 判断 在 
HTTP 传输 中 的 状态 。Cookies 最 典型 的 应 用 是 判定 注册 用 户 是 否 已 经 登录 网 站 ,用 户 可 

会 得 到 提示 ,是否 在 下 一 次 进入 此 网 站 时 保留 用 户 信息 ,以 便 简 化 登录 手续 ,这 些 都 是 

Cookies 的 功用 。 用 户 可 能 会 在 一 段 时 间 内 在 同一 家 网 站 的 不 同 页 面 中 选择 不 同 的 商品 ， 
这 些 信息 都 会 写 人 Cookies ,以 便 在 最 后 付款 时 提取 信息 。 

在 PHP 脚本 诸 言 中 ,可 以 利用 setcookie() 函 数 来 创建 和 删除 Cookie。setcookie() 函 
数 的 语法 如 下 : 

setcookie ( string name [，string value [, int expire [, string path [, string domain [, bool 

secure]]]]] ) 

在 所 有 参数 中 ,除了 name 参数 外 ,其 余 参 数 都 是 可 选 的 。 可 以 用 空 字符 串 ("") 替 换 革 
参数 ,以 跳 过 该 参数 。 参 数 expire 和 secure 的 值 是 整形 ,不 能 用 空 字 符 串 ,而 是 用 0 来 代 
替 。setcookie() 函数 的 参数 见 表 7-3 。 


表 7-3 setcookie() 函 数 的 参数 























参 数 含 义 
name 必须 ,规定 Cookie 的 名 称 
value 必须 ,规定 Cookie 的 值 
expire 可 选 ,规定 Cookie 的 有 效 期 
path 可 选 ,规定 Cookie 的 服务 器 路 径 
domain 可 选 ,规定 Cookie 的 域名 
secure 可 选 ,规定 是 否 通过 安全 的 HTTPS 连接 来 传输 Cookie 


当 需 要 读 取 某 一 个 Cookie 变量 的 值 时 ,只 需 在 $_COOKIE 数组 的 下 标 中 写 上 Cookie 
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变量 名 ,就 引用 该 Cookie 变量 值 ,如 $_COOKIE[ "username" ] 表 示 引 用 Cookie 中 username 变 
量 的 值 。 永 久 性 Cookie 是 存储 在 用 户 计算 机 硬盘 上 的 一 个 数据 文件 。 为 了 创建 永久 性 
Cookie, 延 长 Cookie 的 生存 期 ,可 以 在 setcookie() 函数 中 指定 有 效 时 间 , 这 样 ,关闭 浏览 器 
后 ,Cookie 仍然 驻 留 在 用 户 计算 机 的 硬盘 中 ,以 便 其 后 访问 同一 个 Web 站 点 时 ,这 些 驻 留 
的 Cookie 可 以 为 其 他 程序 所 利用 。 删 除 Cookie 的 方法 是 重新 执行 setcookie() 函数 ,将 
Cookie 值 设置 为 空 字符 串 ,其 余 参 数 和 上 一 次 调用 setcookie() 函 数 时 相同 ,这 样 可 以 删除 
客户 端 指 定名 称 的 Cookie。 当 然 ,将 有 效 时 间 设 置 为 过 去 任何 日 期 的 时 间 戳 ,也 可 以 删除 
指定 名 称 的 Cookie。 

【 例 7-34】 PHP 创建 . 读 取 和 删除 临时 性 Cookie。 

第 1 步 , 在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-34. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-34. php 中 添加 代码 : 

<!DOCTYPE HTML > 

change this license header, choose License Headers in Project Properties. 


To change this template file, choose Tools | Templates 
and open the template in the editor. 


--> 
<HIML> 
<head> 
<Meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<?php 


echo "创建 cookie…< br/>"; 
setcookie("username", " 王 云 清 "); 

setcookie("age", 20); 

echo "输出 cookie 的 信息 ;< br/>"; 

echo "username 的 值 : ". $ _COOKIE[ "username"]."<br>"; 

echo "age 的 值 : ". $ _COOKIE[ "age"]; 

$ lifetime = mktime(12, 30,50,7,8,2017); //2017 年 7 月 8 日 12:30:50 
setcookie("myuser_id", "wang", $ lifetime); 

setcookie("test1", 1, time() + 86400); // 有 效 期 1 天 
setcookie( "test2", 2, time() + 86400 * 30); // 有 效 期 1 个 月 (30 天 ) 
setcookie( "test3", "10", time() + 86400 * 365, "/", "www. cslg. edu. cn"); // 有 效 期 1 年 
setcookie("myuser_id","",time() — 365* 24*x 60* 60); // 删 除 myuser_id 

?> 

</body> 

</HTML > 


第 3 步 ,运行 程序 ,输出 结果 : 
创建 cookie… 
输出 cookie 的 信息 ; 
username 的 值 : 王 云 清 
age 的 值 : 20 
7.8.2 PHP 的 Session 


每 个 Cookie 文件 的 长 度 不 超过 4KB(4096B) ,否则 会 被 裁 掉 。 每 个 域 的 Cookie 总 数 有 
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限 ,如 IE 6.0 或 更 低 版 本 最 多 设置 20 个 Cookie,IE 7.0 和 之 后 的 版 本 最 多 可 以 有 50 个 
Cookie, 而 且 任何 人 都 能 从 客户 端 查看 到 Cookie 的 内 容 , 所 以 很 不 安全 。 为 了 解决 这 个 问 
题 ,PHP 开发 者 设计 出 另 一 种 存储 用 户 交互 信息 的 技术 

1. Session 的 工作 原理 

Session 会 话 是 从 用 户 登 录 网 站 开始 ,到 关闭 浏览 器 或 者 结束 会 话 所 经 过 的 时 间 。 首 次 
启动 会 话 时 ,服务 器 生成 一 个 唯一 的 会 话 标识 符 (Session ID,SID) , 它 是 一 个 标识 会 话 的 长 
的 字符 串 。 在 默认 情况 下 ,会 话 标识 符 存放 在 浏览 器 的 Cookie 中 。 根 据 PHP 的 会 话 配 置 
不 同 ,可 以 将 会 话 中 的 所 有 信息 保存 到 服务 器 共享 内 存 、 会 话 文件 或 者 数据 库 。 

2. Session 的 配置 

在 PHP 的 php. ini 配 置 文件 中 有 一 个 LSession] 段 ,通过 设置 其 中 的 指令 的 值 , 可 以 调 
整 Session 的 很 多 处 理 功能 。 为 了 更 有 效 地 使 用 Session ,必须 了 解 这 些 配置 指令 ,通过 
phpinfoO) 函 数 ,可 以 查看 服务 器 当前 PHP 中 与 Session 有 关 的 配置 。 

Session 的 设置 不 同 于 Cookie, 必 须 先 启动 ,在 PHP 中 必须 调用 Session_start() 函数 ， 
以 便 让 PHP 核心 程序 将 和 Session 相关 的 环境 变量 预先 载 和 至 内 存 中 。Session_stat() 函 
数 的 语法 格式 如 下 所 示 : 





Session。 


bool session start(void) 

这 个 函数 没有 参数 , 且 返 回 值 均 为 True。 它 有 两 个 主要 作用 : 一 是 开始 一 个 会 话 ; 二 
是 返回 已 经 存在 的 会 话 。 

第 一 次 返回 网 站 时 ,Session_start() 函数 就 会 创建 一 个 唯一 的 Session ID ,并 自动 通过 
HTTP 的 响应 头 , 将 这 个 Session ID 保存 到 客户 端 Cookie 中 。 同 时 ,也 在 服务 器 端 创建 一 
个 以 这 个 Session ID 命名 的 文件 ,用 于 保存 这 个 用 户 的 会 话 信息 。 当 同一 用 户 再 次 访问 这 
个 网 站 时 ,也 会 自动 通过 HTTP 的 请 求 头 将 客户 端 Cookie 中 保存 的 Session ID 再 携带 过 
来 ,这 时 Session_start() 函数 就 不 会 再 去 分 配 一 个 新 的 Session ID, 而 是 在 服务 器 的 硬盘 中 
去 寻找 和 这 个 Session ID 同名 的 Session 文件 ,将 之 前 为 这 个 用 户 保 存 的 会 话 信息 读 出 ,在 
当前 脚本 中 应 用 ,达到 跟踪 这 个 用 户 的 目的 。 所 以 ,在 会 话 期 间 , 同 一 用 户 访问 服务 器 上 任 
何 一 个 页 面 时 ,使 用 的 都 是 同一 个 Session ID。 

如 果 不 想 在 每 个 脚本 中 都 使 用 Session_start() 函数 来 开启 Session ,可 以 在 php. ini 里 
配置 “Session. auto_start 二 1”, 无 须 每 次 使 用 Session 前 都 调用 Session_start() 函数 。 

3. Session 的 基本 使 用 

boolean Session_start() 函数 用 于 启动 Session。 

一 旦 启动 会 话 ,在 $_SESSION 数组 的 括号 内 写 上 会 话 变量 名 ,就 可 以 存 取 会 话 变量 
值 。 写 入 Session 变量 ,如 $_SESSION[ 'username'] 二 " 王 ", 读 取 Session 变量 .如 $ _ 
SESSION[ 'username' |]。 

void Session_unset() 函数 用 于 删除 当前 会 话 中 的 所 有 会 话 变量 。 

boolean Session_destroy() 函数 用 于 删除 当前 会 话 中 的 所 有 会 话 变量 ,并 且 删 除 该 会 话 
对 应 的 会 话 文件 。 

string Session_id([string sid]) 函 数 可 以 设置 或 读 取 会 话 标识 符 。 
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bool Session_regenerate_id([ bool delete_old_Session]) 函数 可 以 更 改 会 话 标识 符 。 
7.9 PHP 访问 MySQL 数据 库 


7.9.1 MySQL 数据 库 概 述 


MySQL 是 一 个 关系 型 数据 库 管 理 系 统 , 由 瑞典 MySQL AB 公司 开发 ,目前 属于 
Oracle 旗下 产品 。MySQL 是 最 流行 的 关系 型 数据 库 管理 系统 之 一 ,在 Web 应 用 方面 ， 
MySQL 是 最 好 的 关系 数据 库 管 理 系 统 (Relational Database Management System， 
RDBMS) 应 用 软件 。MySQL 是 一 个 精巧 ,快速 ,多 线程 、 多 用 户 、 安 全 和 强壮 的 SQL 数据 
库 管理 系统 。 

MySQL 的 主要 目标 是 快速 ,健壮 和 易 用 。MySQL 是 一 个 真正 的 多 用 户 、 多 线程 SQL 
数据 库 服 务 器 。 由 于 它 功 能 强大 、 使 用 灵活 且 有 丰富 的 应 用 编程 接口 (APD ,受到 了 广大 自 
由 软件 爱好 者 甚至 是 商业 软件 用 户 的 青睐 ,特别 是 MySQL 与 Apache 和 PHP 结合 ,是 很 多 
Web 系统 的 首选 配置 。 


7.9.2 ”MySQL 的 命令 操作 


MySQL 数据 库 管理 系统 采用 C/S(Client/Server) 结 构 , 由 一 个 服务 器 程序 mysqld. 
exe 和 很 多 不 同 的 客户 程序 和 库 组 成 。 在 这 些 客户 程序 中 ,mysql. exe 是 最 常用 的 一 个 客户 
命令 监控 /解释 程序 (环境 )。 其 作用 是 对 用 户 发 出 的 命令 进行 语法 检查 ,检查 无 误 后 ,向 服 
务 器 提交 命令 请 求 , 接 受 和 向 用 户 返 回 服务 器 执行 的 结果 ; 检查 中 若 发 现 用 户 发 出 的 命令 
不 合法 , 则 拒绝 向 服务 器 提交 命令 ,同时 返回 出 错 信息 。mysql. exe 是 在 MS-DOS 或 命令 提 
示 符 下 使 用 的 一 种 客户 端 工具 ,通过 命令 的 方式 操纵 服务 器 。 

1. 登录 

通过 客户 端 程序 mysql. exe 与 服务 器 程序 建立 信任 连接 。 建 立 连接 时 ,需要 提供 客户 
机 名 .用户 名 、 密 码 等 参数 ,经 服务 器 验证 通过 后 ,会 返回 成 功 建立 连接 的 信息 ,表明 连接 
成 功 。 

启动 客户 端 程序 mysql. exe: 在 命令 提示 符 或 MS-DOS 下 ,进入 MySQL 的 bin 目录 ， 
输入 命令 mysql 后 按 Enter 键 , 若 出 现 如 图 7-23 所 示 的 界面 , 则 表明 连接 成 功 。 











lc: wanp\bin\nysal\nysql5.5.24\bin>nysql 

lMelcone to the MySQL monitor. Comnands end with 3 or \g- 
lour MySQL connection ia is 3 

NServer version: 5.5.24-log MySQL Comnunity Server 《GPL》 


ICopyright Cc> 28868. 28i1, Oracle and/or its affiliates. fll rights reserved. 


‘ademark of Oracle Corporation and/or its 
r nanes may he tradenarks of their respective 


Type ’help;’ or ’\h’ for help. Type ’\c’ to clear the current input statenent. 





Inysql> 


图 7-23 mysql. exe 命令 
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mysql 命令 的 完整 形式 是 : 
mysql - h(servername) - u(username) - p 

参数 说 明 : 

-h 指明 主机 ,省 略 此 参数 , 则 默认 为 localhost, 即 本 地 机 。 
-u 指明 用 户 名 (账号 ) 。 
-p 使 用 密码 。 

上 面 输入 的 命令 mysql 后 面 不 带 任何 参数 ,因为 MySQL 安装 完毕 后 ,系统 数据 库 
mysql 中 的 权限 表 user 中 ,存在 默认 的 空 账号 .无 密码 的 超级 用 户 , 因 此 可 以 从 远程 主机 使 
用 mysql. exe 匿名 访问 服务 器 主机 。 

【 例 7-35】 用 命令 修改 root 用 户 的 默认 空 密码 为 123456 。 

第 1 步 , 在 cmd. exe 控制 台 , 进 入 MySQL 的 bin 目录 后 输入 : 

mysql -u root -p 就 可 以 不 用 密码 登录 了 ,出 现 password: 的 时 候 直接 按 Enter 键 可 以 
进入 。 

第 2 步 ,在 命令 提示 符 中 输入 


mysql > use mysql; 
Database changed( 修 改 数据 库 ) 


第 3 步 ,在 命令 提示 符 中 输入 

mysql > update user set password = password("123456") where user = "root"; 
重新 设置 密码 (这 里 的 密码 为 "123456”) 。 注 意 : 不 要 忘记 分 号 。 
Query OK, 3 rowsaffected (0.09 sec) Rows matched: 3 Changed: 3 Warnings: 0 
第 4 步 ,在 命令 提示 符 中 输入 


mysql > flush privileges; 
Query OK, 0rows affected (0.00 sec) 


第 5 步 ,在 命令 提示 符 中 输入 

mysql > quit 

2. 注销 

注销 即 断 开 当 前 与 服务 器 的 连接 ,输入 exit 按 Enter 键 即 可 。 

3. 数据 库 操 作 

创建 数据 库 ,基本 语法 : 

CREATE DATABASE db_ name; 

db_name 是 要 创建 的 数据 库 的 名 字 。 该 语句 执行 成 功 后 ,会 在 服务 器 的 MySQL 数据 
目录 ( 即 MySQL 安装 目录 下 的 data 目录 ) 下 创建 一 个 名 为 db_name 的 目录 。 

查看 有 哪些 数据 库 , 基 本 语法 : 


SHOW DATABASES 





二 
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打开 数据 库 ( 选 定数 据 库 ) ,基本 语法 : 
USE db_name 


若 要 对 表 进 行 查询 ,修改 、 删 除 等 操作 ,必须 先 打开 数据 库 。 
删除 数据 库 , 基 本 语法 : 


DROP DATABASE [IF EXISTS] db_name; 


DROP DATABASE 用 于 删除 数据 库 中 的 所 有 表 和 数据 库 。 使 用 这 个 命令 要 谨慎 。 

DROP DATABASE 返回 从 数据 库 目 录 被 删除 的 文件 数目 。 通 常 这 个 数目 是 删除 表 的 
3 倍 ,因为 每 张 表 对 应 于 一 个 “. myd” 数 据 文件 一 个 “. myi” 索 引文 件 和 一 个 “. frm” 表 定义 
文件 。 

4. 表 操 作 

创建 表 , 基 本 语法 : 

CREATE TABLE table name(column namecolumn type) 

字段 使 用 NOT NULL 属性 ,设置 这 个 字段 的 值 不 能 为 NULL。 字 段 的 AUTO_ 
INCREMENT 属性 告诉 MySQL 自动 增加 id 字段 下 一 个 可 用 编号 。 关 键 字 PRIMARY KEY 
用 于 定义 此 列 作为 主键 。 可 以 使 用 逗号 分 隔 多 个 列 来 定义 主键 。 数 据 表 中 字段 的 类 型 有 : 

数值 类 型 , MySQL 支持 所 有 标准 SQL 中 的 数值 类 型 ,其 中 包括 严格 数据 类 型 
(INTEGER、SMALLINT、DECIMAL、NUMBERIC) ,以 及 近似 数值 数据 类 型 (FLOAT、 
REAL、DOUBLE PRESISION) ,并 在 此 基础 上 扩展 了 TINYINT、MEDIUMINT、BIGINT 
这 3 种 长 度 不 同 的 整 型 ,并 增加 了 BIT 类 型 ,用 来 存放 位 数据 。 

字符 串 类 型 , MySQL 提供 了 8 个 基本 的 字符 串 类 型 ,分 别 为 CHAR、VARCHAR、 
BINARY、VARBINARY、BLOB、TEXT、ENUM 和 SET 等 多 种 字符 串 类 型 。 

日 期 和 时 间 类 型 ,在 处 理 日 期 和 时 间 类 型 的 值 时 ,MySQL 带 有 DATE、TIME、TEAR、 
DATEYIME 和 TIMESTAMP 5 个 不 同 的 数据 类 型 供 选 择 。 

复合 类 型 ,MySQL 还 支持 两 种 复合 数据 类 型 ENUM 和 SET ,它们 扩展 了 SQL 规范 。 

查看 有 哪些 表 , 基 本 语法 : 

SHOW TABLES 

查看 表 结 构 ,基本 语法 : 

DESCRIBE table_name 

查看 表 中 数据 ,基本 语法 : 

SELECT 列 FROM table_name[ WHERE 条 件 子 句 ][GROUP 分 组 子 句 ][ORDER 条 件 子 句 ] 

修改 表 中 数据 ,基本 语法 : 

UPDATE table_nameSET 列 = 新 值 [WHERE 条 件 子 句 ] 

删除 表 中 数据 ,基本 语法 : 


DELETE FROM table_name[ WHERE 条 件 子 句 ] 
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【 例 7-36】 用 命令 建立 一 个 student 数据 库 , 在 该 库 中 创建 一 个 BasicInfo 表 。 表 的 
3 个 字段 分 别 为 : SNo varchar(20) 非 空 且 为 主键 ,SNamevarchar(50),SID varchar(20) 。 

第 1 步 ,进入 MySQL 的 控制 台 , 用 账号 /密码 root/123456 登录 。 

第 2 步 ,mysql > create database db_student; 井 建立 数据 库 student。 

第 3 步 ,mysql > show databases; 井 查看 所 建立 的 数据 库 。 

第 4 步 ,mysql> use db_student # 使 用 数据 库 。 

第 5 步 , mysql > create table basicInfo (SNo VARCHAR (20) Not Null, 
SNameVARCHAR(50),SID VARCHAR (20), Primary Key (SNo)) ENGINE= InnoDB 
DEFAULT CHARSET==utf8; # 建 立 表 basicInfo。 

第 6 步 ,mysql > show tables;# 查 看 数据 表 。 

第 7 步 ,mysql > insert into basicInfo values("0903001"," 张 飞 ","051277777734"); 井 
插入 一 条 记录 。 

第 8 步 ,mysql > select * from basicInfo; # 查 看 数据 记录 。 


7.9.3 PHP 操纵 MySQL 


使 用 PHP 语言 编制 程序 ,让 用 户 在 网 络 上 通过 这 种 程序 将 他 们 的 数据 保存 到 数据 库 
中 ,或 对 数据 库 进行 修改 、 删 除 等 操作 。 

PHP 将 对 MySQL 数据 库 的 操作 ,如 连接 、 断 开 、 查 询 、 修 改 、 删 除 等 ,都 封装 成 函数 。 
这 些 函 数 属于 PHP 手册 中 的 “MySQL 函数 库 ”。 常 用 的 函数 有 以 下 10 个 。 

1. mysql_error( ) 国 数 

【语法 】 


string mysql_error ([resource link identifier]) 


返回 上 一 个 MySQL 操作 产生 的 文本 错误 信息 ,如 果 没 有 出 错 , 则 返回 "'( 空 字符 串 )。 
如 果 没 有 指定 连接 资源 号 , 则 使 用 上 一 个 成 功 打开 的 连接 从 MySQL 服务 器 提取 错误 信息 。 

2. mysql_errno() 困 数 

【语法 】 

int mysql_errno ([resource link_identifier]) 


返回 上 一 个 MySQL 操作 中 的 错误 信息 的 数字 代码 ,返回 上 一 个 MySQL 函数 的 错误 
代码 ,如 果 没 有 出 错 , 则 返回 0。 注 意 ,以 上 两 个 函数 仅 返 回 最 近 一 次 MySQL 函数 的 执行 
(不 包括 mysql_error() 和 mysql_errno()) 的 错误 文本 或 代码 ,因此 如 果 要 使 用 它们 ,尽量 确 
保 在 调用 另 一 个 MySQL 函数 前 检查 它们 的 值 。 

3. mysql_connect() 国 数 

【 话 法 】 

mysql_connect( $ servername, $ username, $ password) 


打开 一 个 到 MySQL 服务 器 的 连接 ,如 果 成 功 , 则 返回 一 个 MySQL 连接 标识 ,一 般 为 
资源 型 数据 ,失败 则 返回 False。 其 中 , $ servername: 指明 MySQL 数据 库 所 在 的 服务 器 主 
机 名 称 , 可 用 IP 表示 ; $ username: 访问 该 服务 器 主机 的 账号 名 称 ; $ password: 访问 该 
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服务 器 的 密码 。 注 意 以 下 几 点 : 

第 1 点 ,不 提供 参数 时 使 用 以 下 默认 值 : 

$ servername = ""( 相 当 于 $ servername = 'localhost') 

$ username = "" 

$ password ="" 

$ servername 参数 可 以 包括 端口 号 ,如 servername:port。 

第 2 点 ,可 以 在 函数 名 前 加 @ 来 抑制 失败 时 产生 的 错误 信息 。 

第 3 点 ,一 旦 脚本 结束 ,到 服务 器 的 连接 就 会 被 关闭 ,这 点 与 PHP 每 到 页 末 就 释放 简单 
变量 和 客户 端 变量 相同 。 若 要 显 式 (强制 ) 地 释放 该 资源 ,可 用 mysql_close() 函 数 。 应 养 成 
用 完 连 接 , 及 时 释放 连接 的 好 习惯 。 

4. mysql_eclose() 函数 

【语法 】 

bool mysql_close ([resource link identifier]) 


如 果 成 功 , 则 返回 True; 失败 , 则 返回 False。 

mysql_close() 关 闭 指定 的 连接 标识 所 关联 的 到 MySQL 服务 器 的 连接 。 如 果 没 有 指定 
link_identifier, 则 关闭 上 一 个 打开 的 连接 。 通 常 不 需要 使 用 mysql_close(), 因 为 由 mysql_ 
connect 打开 的 连接 会 在 脚本 执行 完毕 后 自动 关闭 。 但 若 在 脚本 中 间 用 完 后 ,提倡 使 用 此 据 
数 及 时 连接 资源 ,以 提高 效率 。 

5. mysql_select_db("test", $ server_link) 

选择 一 个 MySQL 数据 库 , 使 其 成 为 当前 数据 库 。 一 个 数据 库 成 为 当前 数据 库 , 那 么 当 
前 所 有 的 操作 都 是 针对 它 的 。 

【语法 】 


bool mysql_select_db (string database_name[ ,resource link_identifier]) 


如 果 成 功 , 则 返回 True; 失败 则 返回 False。 

mysql_select_db() 设 定 与 指定 的 连接 标识 符 所 关联 的 服务 器 上 的 当前 数据 库 。 如 果 没 
有 指定 连接 标识 符 , 则 使 用 上 一 个 打开 的 连接 。 如 果 没 有 打开 的 连接 ,本 函数 将 无 参数 调用 
mysql_connect() 来 尝试 打开 一 个 连接 并 使 用 之 。 

6. mysql_query() 困 数 

发 送 一 个 MySQL 查询 到 当前 数据 库 , 由 当前 数据 库 执行 之 。 

【 话 法 】 

resource mysql_query (string query [, resource link identifier]) 


mysql_query() 向 与 指定 的 连接 标识 符 关联 的 服务 器 中 的 当前 数据 库 发 送 一 条 查询 ,由 
当前 数据 库 执行 之 。 如 果 没 有 指定 link_identifier, 则 使 用 上 一 个 打开 的 连接 。 如 果 没 有 打 
开 的 连接 ,本 函数 会 尝试 无 参数 调用 mysql_connect() 函数 来 建立 一 个 连接 并 使 用 之 。 查 询 
字符 串 不 应 以 分 号 结束 ,查询 结果 会 被 缓存 。 

mysql_query() 仅 对 SELECT SHOW EXPLAIN 或 DESCRIBE 语句 返回 一 个 资源 标 
识 符 , 如 果 查 询 执 行 不 正确 , 则 返回 False。 对 于 其 他 类 型 的 SQL 语句 ,mysql_query() 在 执 
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行 成 功 时 返回 True, 出 错时 返回 False。 非 False 的 返回 值 意味 着 查询 是 合法 的 ,并 能 够 被 
服务 器 执行 。 

7. mysql_affected_rows() 国 数 

取得 前 一 次 MySQL 操作 所 影响 的 记录 行 数 。 

【语法 】 

int mysql_affected_rows ([resource link_identifier]) 


取得 最 近 一 次 与 link_identifier 关联 的 INSERT 、 UPDATE 或 DELETE 查询 所 影响 的 
记录 行 数 。 

8. mysql_num_rows() 国 数 

取得 结果 集中 行 的 数目 。 

【语法 】 


int mysql_num_rows (resource result) 


mysql_num_rows() 返 回 结果 集中 行 的 数目 。 此 命令 仅 对 SELECT 语句 有 效 。 
9.mysql_fetch_array( ) 函数 

从 结果 集中 取得 一 行 作为 关联 数组 ,或 数字 数组 ,或 二 者 兼 有 。 

【 话 法 】 

array mysql_fetch array (resource result [, int result_type]) 


返回 根据 从 结果 集 取得 的 行 生成 的 数组 ,如 果 没 有 更 多 行 , 则 返回 False。 
10.，mysql_free_result() 函数 

mysql_free_result() 将 释放 所 有 与 结果 标识 符 result 关联 的 内 存 。 
【语法 】 

bool mysql_free_result (resource result) 


mysql_free_result() 仅 需要 在 考虑 到 返回 很 大 的 结果 集 时 会 占用 多 少 内 存 时 调用 。 脚 
本 结束 后 ,所 有 关联 的 内 存 都 会 被 自动 释放 。 如 果 成 功 , 则 返回 True; 失败 则 返回 False。 

【 例 7-37】 使 用 PHP 建立 和 关闭 MySQL 连接 ,查询 、 提 取 和 显示 数据 。 

第 1 步 ,在 PhpWebsite 项 目 中 添加 新 PHP 文件 Ex7-37. php ,并 设置 为 索引 文件 。 

第 2 步 ,在 Ex7-37. php 中 添加 代码 : 


<HITML > 

< head > 
<Meta charset = "UTF — 8"> 
<title></title> 

</head> 

<body> 
<?php 
$ server_link = mysql_connect("localhost", "root","123456") // $ server_link 是 资源 

型 变量 

or die("Can not connect: to server" . mysql_error()); 
print ("Connected successfully < br/>"); 


mysql_select db('db_student', $ server link) 
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or die ('db_student: '. mysql_error()); 


$result = mysql query("select * from basicInfo") 
or die("Invalid query: " . mysql error()); 
$ num rows = mysql_num rows( $ result); 
echo " $ num_rows Rows\n < br/>"; 
while ( $ row = mysql fetch array( $ result)) 
{ 
printf ("SNo: %s SName: %s SID: %s<br/>", $ row[0], $ row[1], $ row[2]); 
} 
mysql_free result( $ result); 
mysql_close( $ server link); 
?> 
</body> 
</HTML > 


第 3 步 ,运行 程序 ,结果 如 下 : 


Connected successfully 
1 Rows 
SNo: 0903001 SName: 张 飞 SID: 051277777734 


7.10 习 题 


1. 请 说 明 PHP 中 传 值 与 传 引用 的 区 别 。 

2. 使 用 PHP 写 一 个 函数 ,从 一 个 标准 URL 里 取出 文件 的 扩展 名 。 例 如 : http:// 
www. sina. com. cn/abc /de/fg. php? id==1 需要 取出 php 或 . php。 

3. 运行 下 列 PHP 程序 ,输出 结果 。 


<?php 

$ strl = null; 

$ str2 = false; 

echo $ strl == $ str2 ? ' 相 等 ': ' 不 相等 '; 


$atr3 se ™"; 

$str4 = 0; 

echo $ str3 == $ str4 ? ' 相 等 ': ' 不 相等 '; 
$str5 = 0; 

$ str6 = “0 

echo $ str5== = $ str6 ? ' 相 等 ': ' 不 相等 '; 
?> 


4. 使 用 PHP 描述 一 个 冒 泡 排 序 函 数 , 对 象 可 以 是 一 个 数组 。 

5. 分 析 PHP 函数 echo() .print() .print_r() 的 区 别 。 

6. 使 用 PHP 实现 功能 : 产生 0 一 9 的 数组 元 素 ,查找 0 是 否 在 数组 里 面 ,如 果 存 在 ,就 
输出 键 名 ; 如 果 不 存在 ,就 提示 “0 不 在 数组 中 ”。 

7. 使 用 PHP 实现 在 本 地 服务 器 (账号 : root, 密码 123) 查 询 MySQL 的 student 数据 
库 的 info 表 的 所 有 信息 (info 表 的 结构 (部 门 名 称 ,员工 姓名 ,PC 名 称 )) ,并 用 table 在 网 页 
上 显示 。 





ASP 编程 


8.1 ASP.NET Web 编程 原理 


8.1.1 网 站 .Web 应 用 程序 和 虚拟 目录 的 关系 


在 IIS 中 可 以 创建 网 站 、Web 应 用 程序 和 虚拟 目录 ,以便 与 计算 机 网 络 上 的 用 户 共 享 信 
息 。 网 站 .Web 应 用 程序 和 虚拟 目录 的 关系 图 如 图 8-1 所 示 。 一 个 网 站 (Web Site) 包 含 一 
个 或 多 个 Web 应 用 程序 (Web Application) ,一 个 Web 应 用 程序 包含 一 个 或 多 个 虚拟 目录 
(Virtual Directory) ,而 虚拟 目录 则 映射 到 Web 服务 器 或 远程 计算 机 上 的 物理 目录 。 














网 站 ln 应 用 程序 ln 虚拟 日 录 





























图 8-1 网 站 .Web 应 用 程序 和 虚拟 目录 的 关系 图 


网 站 是 Web 应 用 程序 的 容器 ,每 个 网 站 都 有 一 个 唯一 的 标识 ,由 IP 地 址 、 端 口 和 可 选 
的 主机 头 /主机 名 组 合 而 成 ,Web 服务 器 根据 收 到 的 HTTP 请 求 中 的 这 些 信 息 来 确定 是 对 
哪 一 个 网 站 的 请 求 。 

Web 应 用 程序 是 一 种 在 应 用 程序 池 (Application Pool) 中 运行 并 通过 HTTP 向 用 户 提 
供 信息 服务 的 软件 程序 。 创 建 Web 应 用 程序 时 ,Web 应 用 程序 的 名 称 将 成 为 网 站 URL 的 
一 部 分 ,用 户 可 以 通过 Web 浏览 器 发 出 针对 该 URL 的 HTTP 请 求 。 在 IIS 中 ,每 个 网 站 
至 少 必须 拥有 一 个 Web 应 用 程序 (但 不 一 定 是 ASP. NET 应 用 程序 ,可 以 是 其 他 类 型 的 
Web 应 用 程序 ) , 它 被 称 为 “ 根 Web 应 用 程序 ”或 “默认 Web 应 用 程序 ”, 除 此 之 外 ,网 站 还 可 
以 包含 一 个 或 多 个 ASP. NET( 或 其 他 种 类 ) Web 应 用 程序 。 


8.1.2 IIS 的 ASP. NET 请 求 处 理 过 程 


ASP. NET 是 一 个 强大 的 Web 应 用 构建 平台 ,提供 了 极 大 的 灵活 性 和 能 力 , 可 以 构建 
出 所 有 类 型 的 Web 应 用 。 通 过 比较 IIS 5、IIS 6、IIS 7 这 3 代 IIS 对 请 求 的 处 理 过 程 ,可 以 
熟悉 ASP. NET 的 底层 机 制 并 对 请 求 (request) 是 怎么 从 Web 服务 器 传送 到 ASP. NET 运 
行 时 有 所 了 解 。 通 过 对 底层 机 制 的 了 解 ,可 以 加 深 对 ASP. NET 的 理解 。 

1. IIS 5 及 其 特点 

JIS 5 一 个 显著 的 特征 就 是 Web Server 和 真正 的 ASP. NET Application 的 分 离 。 作 为 
Web Server 的 IIS 运行 在 InetInfo. exe 进程 上 ,InetInfo. exe 是 一 个 Native Executive( 本 地 
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执行 ) ,并 不 是 一 个 托管 的 程序 ,而 真正 的 ASP. NET Application 则 是 运行 在 aspnet_wp 的 
Worker Process 进程 上 ,该 进程 初始 化 时 会 加 载 CLR (Comon Language Runtime) ,所 以 是 
一 个 托管 的 环境 。 

互联 网 服务 器 应 用 程序 接口 (Internet Server Application Programe Interface,ISAPI) 
负责 处 理 各 种 后 级 名 的 应 用 程序 。ISAPI 服务 器 扩展 是 可 以 被 HTTP 服务 器 加 载 和 调用 
的 DLL。Internet 服务 器 扩展 也 称 为 Internet 服务 器 应 用 程序 (ISA), 用 于 增强 符合 
Internet 服务 器 API (ISAPD 的 服务 器 的 功能 。ISA 通过 浏览 器 应 用 程序 调用 ,并 且 将 相似 
的 功能 提供 给 通用 网 关 接 口 (CGD) 应 用 程序 。IIS 通过 程序 映射 指定 ASP. NET 网 页 的 请 
求 ( 扩 展 名 为 . aspx) ,由 aspnet_isapi. dll 处 理 。 

JS 5 模式 的 特点 : 

首先 ,同一 台 主 机 在 同一 时 间 只 能 运行 一 个 aspnet_wp 进程 ,每 个 基于 虚拟 目录 的 
ASP. NET Application 对 应 一 个 应 用 程序 域 (Application Domain, AD) ,也 就 是 说 ,每 个 应 
用 程序 Application 都 运行 在 同一 个 Worker Process 中 , Application 之 间 的 隔离 是 基于 
AD, 而 不 是 基于 Process 的 。 

其 次 ,ASP. NET 的 ISAPI 不 仅 负责 创建 aspnet_wp Worker Process, 而 且 负 责 监 控 该 
进程 ,如 果 检 测 到 aspnet_wp 的 性 能 降低 到 某 个 设 定 的 下 限 ,ASP. NET 的 ISAPI 会 负责 结 
束 该 进程 。 当 aspnet_wp 结束 之 后 ,后 续 的 Request 会 导致 ASP. NET ISAPI 重新 创建 新 
的 aspnet_wp Worker Process。 

最 后 ,由 于 IIS 和 Application 运行 在 它们 各 自 的 进程 中 ,它们 之 间 的 通信 必须 采用 特 
定 的 通信 和 机制。 本 质 上 ,IIS 所 在 的 InetInfo 进程 和 Worker Process 之 间 的 通信 是 同一 台 
机 器 不 同 进程 的 通信 (local interprocess communications) ,基于 性 能 考虑 ,它们 之 间 采 用 基 
于 Named pipe 的 通信 机 制 。ASP. NET 的 ISAPI 和 Worker Process 之 间 的 通信 通过 它们 
之 间 的 一 组 Pipe 实现 。 同 理 , ASP. NET 的 ISAPI 通过 异步 的 方式 将 Request 传 到 
Worker Process 并 获得 Response。 但 是 , Worker Process 则 是 通过 同步 的 方式 向 ASP. 
NET ISAPI 获得 一 些 基于 Server 的 变量 。 

2. JIS 6 及 其 特点 

IIS 5 是 通过 InetInfo. exe 监听 Request 并 把 Request 分 发 到 Work Process 的 。 换 名 
话说 ,在 IIS 5 中 对 Request 的 监听 和 分 发 是 在 用 户 模式 (User Mode) 中 进行 的 。 而 在 IIS 6 
中 ,这 种 工作 被 移植 到 内 核 模 式 (Kernel Mode) 中 进行 ,所 有 的 这 一 切 都 通过 一 个 新 的 组 件 
http. sys 负责 。 

为 了 避免 用 户 应 用 程序 访问 或 者 修改 关键 的 操作 系统 数据 , Windows 提供 了 两 种 处 理 
器 访问 模式 : 用 户 模 式 (User Mode) 和 内 核 模式 (Kernel Mode) 。 一 般 地 ,用 户 程序 运行 在 
User Mode 下 ,而 操作 系统 代码 运行 在 Kernel Mode 下 。Kernel Mode 的 代码 允许 访问 所 
有 系统 内 存 和 所 有 CPU 指令 。 

在 用 户 模 式 下 ,http. sys 接收 到 一 个 基于 aspx 的 http request, 然 后 它 会 根据 IIS 6 中 
的 Metabase( 元 数据 库 ) 查 看 基于 该 Request 的 Application 属于 哪 一 个 应 用 程序 池 。 如 果 
该 应 用 程序 池 不 存在 , 则 创建 ; 否则 直接 将 请 求 发 到 对 应 的 应 用 程序 池 的 队列 中 。 

每 个 应 用 程序 池 对 应 一 个 Worker Process: w3wp. exe, 运 行 在 User Mode 下。 在 IIS 
6 的 Metabase 中 维护 应 用 程序 池 和 Worker process 的 映射。WAS(Web Administrative 
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Service) 根 据 映射 ,将 存在 于 某 个 应 用 程序 池 队 列 的 请 求 传递 到 对 应 的 Worker Process( 如 
果 没 有 ,就 创建 这 样 一 个 进程 )。 在 Worker Process 初始 化 的 时 候 , 加 载 ASP. NET ISAPI 
和 公共 语言 运行 库 (Common Language Runtime,CLR)。 最 后 的 流程 和 IIS 5. x 一 样 ,通过 
AppManagerAppDomainFactory 的 Create 方法 为 应 用 程序 创建 一 个 AD; 通过 ISAPI 运行 
时 的 Process Request 处 理 请 求 。 

3. IIS 7 及 其 特点 

IIS 7 站 点 启动 并 处 理 请 求 的 步 又 如 图 8-2 所 示 。 

步骤 1, 当 客户 端 浏览 器 开始 HTTP 请 求 一 个 Web 服务 器 的 资源 时 ,HTTP. sys 拦截 
到 这 个 请 求 。 

步骤 2,HTTP. sys 联系 WAS 从 配置 文件 中 获得 信息 。 

步骤 3,WAS 向 配置 存储 中 心 ApplicationHost. config 请 求 配置 信息 。 

步骤 4,WWW 服务 接收 到 配置 信息 。 配 置信 息 是 指 类 似 应 用 程序 池 配 置信 息 .站 点 配 
置信 息 等 。 

步骤 5,WWW 服务 使 用 配置 信息 去 配置 HTTP. sys 处 理 策略 。 

步骤 6,WAS 为 请 求 的 应 用 程序 池 启 动 一 个 Worker Process。 

步骤 7,Worker Process 处 理 请 求 , 并 返回 一 个 HTTP. sys 响应 。 

步骤 8, 客 户 端 接收 到 处 理 结果 信息 。 
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图 8-2 IIS 7 站 点 启动 并 处 理 请 求 的 步骤 
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在 IIS7 之 前 ,ASP. NET 是 以 IIS ISAPI 扩 展 的 方式 外 加 到 IIS 的 。 ASP 以 及 PHP 都 
以 相同 的 方式 配置 ,其 中 PHP 在 IIS 采用 了 两 种 配置 方式 ,除了 IIS ISAPI 扩展 方式 外 ,还 
包括 CGI 的 方式 ,系统 管理 者 能 选择 PHP 程序 的 执行 方式 。 客 户 端 对 IIS 的 HTTP 请 求 
会 先 经 由 IIS 处 理 , 然 后 IIS 根据 要 求 的 内 容 类 型 ,如 果 是 HTML 静态 网 页 ,就 由 IIS 自行 
处 理 , 如 果 不 是 ,就 根据 要 求 的 内 容 类 型 ,分派 给 各 自 的 IIS ISAPI 扩 展 ; 如 果 要 求 的 内 容 类 
型 是 ASP. NET, 就 分 派 给 负责 处 理 ASP. NET 的 IIS ISAPI 扩展 ,也 就 是 aspnet_isapi. dll。 
IIS 7 应 用 程序 池 的 托管 管道 模式 与 IIS 6 经 典 模式 相同 ,这 种 模式 是 兼容 的 方式 ,以 降低 升 
级 的 成 本 。 


8.1.3 ASP.NET 页 面 生命 周期 


ASP. NET 页 面 运行 时 ,页 面 将 经 历 一 个 生命 周期 。 在 生命 周期 中 将 执行 一 系列 的 处 
理 步 又 ,包括 初始 化 实例 化 控件 ,还原 和 维护 状态 .运行 事件 处 理 程序 代码 以 及 呈现 结果 。 
了 解 和 掌握 ASP. NET 页 面 生命 周期 ,有 助 于 更 加 灵活 地 控制 页 面 ,以 需要 的 方式 编程 开 
发 。ASP. NET 页 面 运行 会 经 历 一 个 又 一 个 的 事件 链 , 每 个 事件 链 中 执行 不 同 的 行为 ,所 有 
的 行为 共同 组 成 所 需要 的 页 面 。 了 解 生命 周 期 更 有 助 于 定位 程序 调试 中 发 生 问题 的 地 方 。 

通过 了 解 ASP. NET 请 求 管道 .应 用 程序 生命 周期 ,整体 运行 机 制 可 知 ,ASP. NET 应 
用 程序 周期 中 的 PreRequestHandlerExecute 事件 与 PostRequestHandlerExecute 事件 之 间 
就 是 页 面 生命 周期 了 ,对 于 aspx 页 面 ,就 是 一 系列 的 打造 页 面 控件 树 ,触发 各 种 页 面 事件 。 
当 在 浏览 器 地 址 栏 中 输入 网 址 , 按 Enter 键 查 看 页 面 时 会 向 IIS 发 送 一 个 请 求 ,服务器 就 会 
判断 发 送 过 来 的 请 求 页 面 ,识别 HTTP 页 面 处 理 程序 类 后 ,ASP. NET 运行 时 将 调用 处 理 
程序 的 ProcessRequest 方法 来 处 理 请 求 , 创 建 页 面 对 象 。 通 常情 况 下 ,无 须 更 改 此 方法 的 
实现 , 它 是 由 Page 类 提供 的 。 接 下 来 ,被 创建 页 面 对 象 的 ProcessRequest 方法 使 页 面 经 历 
了 各 个 阶段 : 初始 化 加载 视 图 状态 信息 和 回 发 数据 .加 载 页 面 的 用 户 代码 以 及 执行 回 发 服 
务 器 端 事件 。 之 后 ,页 面 进入 显示 模式 : 收集 更 新 的 视图 状态 ,生成 HTML 代码 ,并 随后 将 
代码 发 送 到 输出 控制 台 。 最 后 , 印 载 页 面 ,并 认为 请 求 处理 完 毕 。 其 中 ,页 面 对 象 
ProcessRequest 方法 完成 的 这 一 系列 事件 的 处 理 过 程 就 是 Asp. Net 页 面 生命 周期 。 

(1) 页 面 请 求 阶段 ,发生 在 页 面 生命 周期 开始 之 前 。 用 户 请 求 页 时 ,ASP. NET 将 确定 
是 否 需要 分 析 和 编译 页 (从 而 开始 页 的 生命 周期 ) ,或 者 是 否 可 以 在 不 运行 页 的 情况 下 发 送 
页 的 缓存 版 本 ,以 进行 响应 。 

(2) 开始 阶段 ,将 设置 页 属性 。 在 此 阶段 ,页 面 还 将 确定 请 求 是 回 发 ,还 是 新 请 求 , 并 设 
置 IsPostBack 属性 。 此 外 ,在 开始 阶段 期 间 , 还 将 设置 页 的 UICulture 属性 。 

(3) 页 面 初始 化 阶段 ,可 以 使 用 页 面 中 的 控件 ,并 设置 每 个 控件 的 UniqueID 属性 。 此 
外 ,任何 主题 都 将 应 用 于 页 面 。 如 果 当 前 请 求 是 回 发 , 则 回 发 数据 尚未 加 载 ,并 且 控件 属性 
值 尚未 还 原 为 视图 状态 中 的 值 。 

(4) 加 载 阶段 。 如 果 当 前 请 求 是 回 发 , 则 将 使 用 从 视图 状态 和 控件 状态 恢复 的 信息 加 
载 控 件 属性 。 

(5) 验证 阶段 。 将 调用 所 有 验证 程序 控件 的 Validate 方法 ,此 方法 将 设置 各 个 验证 程 
序 控件 和 页 的 IsValid 属性 。 

(6) 回 发 事件 处 理 阶段 。 如 果 请 求 是 回 发 , 则 将 调用 所 有 事件 处 理 程序 。 
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(7) 呈现 阶段 。 在 呈现 前 ,会 针对 该 页 和 所 有 控件 保存 视图 状态 。 在 呈现 阶段 中 ,页 面 
会 针对 每 个 控件 调用 Render 方法 , 它 会 提供 一 个 文本 编写 器 ,用 于 将 控件 的 输出 写 入 页 的 
Response 属性 的 OutputStream 中 。 

(8) 印 载 阶段 。 完 全 呈现 页 面 并 已 将 页 发 送 至 客户 端 ,准备 丢弃 该 页 后 ,将 调用 种 载 。 
此 时 ,将 外 载 页 属性 (如 Response 和 Request) 并 执行 清理 。 


8.2 ASP 的 常用 控件 


创建 ASP. NET 网 页 时 ,可 以 使 用 HTML 服务 器 控件 .Web 服务 器 控件 、 验 证 控件 和 
用 户 控件 这 4 类。 

HTML 服务 器 控件 对 服务 器 公开 的 HTML 元 素 , 可 对 其 进行 编程 。HTML 服务 器 控 
件 公开 一 个 对 象 模型 ,该 模型 十 分 紧密 地 映射 到 相应 控件 所 呈现 的 HTML 元 素 。 

Web 服务 器 控件 是 另 一 组 设计 侧重 点 不 同 的 控件 。 它 们 不 必 一 对 一 地 映射 到 HTML 
服务 器 控件 ,而 是 定义 为 抽象 控件 。 在 抽象 控件 中 ,控件 呈现 的 实际 标记 与 编程 使 用 的 模型 
可 能 截然 不 同 。Web 服务 器 控件 比 HTML 服务 器 控件 具有 更 多 的 内 置 功能 。Web 服务 器 
控件 不 仅 包 括 窗 体 控件 ,而 且 还 包括 特殊 用 途 的 控件 (如 日 历 . 菜 单 和 树 视 图 控件 )。Web 
服务 器 控件 与 HTML 服务 器 控件 相 比 更 为 抽象 ,因为 其 对 象 模型 不 一 定 反 映 HTML 
语法 。 

验证 控件 可 用 于 对 必 填 字段 进行 检查 ,对 照 字符 的 特定 值 或 模式 进行 测试 ,验证 某 个 值 
是 否 在 限定 范围 之 内 等 。 有 关 更 多 信息 ,请 参见 第 4 章 。 

用 户 控件 作为 ASP. NET 网 页 创建 的 控件 ,可 以 嵌入 到 其 他 ASP. NET 网 页 中 ,这 是 
一 种 创建 工具 栏 和 其 他 可 重用 元 素 的 捷径 。 


8.2.1 HTML 服务 器 控件 概述 


HTML 服务 器 控件 属于 HTML 元 素 ( 或 采用 其 他 支持 的 标记 的 元 素 ,如 XHTML)， 
它 包含 多 种 属性 ,使 其 可 以 在 服务 器 代码 中 进行 编程 。 默认 情况 下 ,服务 器 上 无 法 使 用 
ASP. NET 网 页 中 的 HTML 元 素 。 这 些 元 素 将 被 视 为 不 透明 文本 并 传递 给 浏览 器 ,但 是 ， 
通过 将 HTML 元 素 转换 为 HTML 服务 器 控件 ,可 将 其 公开 为 可 在 服务 器 上 编程 的 元 素 。 
HTML 服务 器 控件 的 对 象 模型 紧密 映射 到 相应 元 素 的 对 象 模型 。 

页 中 的 任何 HTML 元 素 都 可 以 通过 添加 属性 runat 一 "server" 转 换 为 HTML 服务 器 
控件 。 在 分 析 过 程 中 ,ASP. NET 页 框架 将 创建 包含 runat 二 “server” 属 性 的 所 有 元 素 的 实 
例 。 若 要 在 代码 中 以 成 员 的 形式 引用 该 控件 , 则 还 应 为 该 控件 分 配 id 属性 。 

页 框架 为 页 中 最 常 动态 使 用 的 HTML 元 素 提 供 了 预定 义 的 HTML 服务 器 控件 : form 
元 素 ,input 元 素 ( 文 本 框 、 复 选 框 、 提 交 按 钮 )、select 元 素 ,等 等 。 这 些 预定 义 的 HTML 服 
务 器 控件 具有 一 般 控件 的 基本 属性 ,此 外 ,每 个 控件 通常 提供 自己 的 属性 集 和 自己 的 事件 。 

HTML 服务 器 控件 提供 以 下 功能 : 可 在 服务 器 上 使 用 熟悉 的 面向 对 象 的 技术 对 其 进 
行 编程 。 每 个 服务 器 控件 都 公开 一 些 属 性 (Property) ,可 以 使 用 这 些 属性 在 服务 器 代码 中 
以 编程 方式 来 操作 该 控件 的 标记 属性 (Attribute) 。 提 供 一 组 事件 ,可 以 为 其 编写 事件 处 理 
程序 ,方法 与 在 基于 客户 端的 窗 体 中 大 致 相同 ,不同 的 是 ,事件 处 理 是 在 服务 器 代码 中 完 
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成 的 。 

在 客户 端 脚本 中 处 理事 件 的 能 力 。 自 动 维护 控件 状态 。 在 页 到 服务 器 的 往返 行程 中 ， 
将 自动 对 用 户 在 HTML 服务 器 控件 中 输入 的 值 进行 维护 并 发 送 回 浏览 器 。 与 ASP. NET 
验证 控件 进行 交互 ,因此 可 以 验证 用 户 是 否 已 在 控件 中 输入 了 适当 的 信息 。 数 据 绑 定 到 一 
个 或 多 个 控件 属性 ,支持 样式 (如 果 在 支持 级 联 样式 表 的 


二 


浏览 器 中 显示 ASP. NET 网 页 )。 A 指针 
直接 可 用 的 自 定义 属性 。 可 以 向 HTML 服务 器 控件 。 名“ en 
添加 所 需 的 任何 属性 ,页 框架 将 呈现 这 些 属性 ,而 不 会 更 ”只 mpuebm 
改 其 任何 功能 。 这 允许 向 控件 添加 浏览 器 特定 属性 。 中 二 
HTML 元 素 不 经 过 服务 器 解释 ,在 服务 器 看 来 即使 Input (Password) 
再 标准 或 者 再 不 标准 ,都 只 是 文本 常量 而 已 。HTML 服 。 @ Cn 
务 器 控件 ,一 个 简单 的 runat 二 "server" ,让 服务 器 明白 这 名 Input Hiddem 
个 标签 不 再 是 简单 的 文本 ,而 是 一 个 HTML 服务 器 控件 。 号 ee 
(System. Web. UI. HTMLControls. HTMLControl ) 。 Image 
而 标准 服务 器 控件 则 继承 自 ystem. Web UL 时 Sp 
WebControls. WebControl, 图 Div 


常见 的 HTML 服务 器 控件 如 图 8-3 所 示 , 具 体 使 用 
方法 可 以 参考 第 2 章 的 相关 内 容 。 
8.2.2 ASP 的 标准 服务 器 控件 概述 


Web 服务 器 控件 包括 传统 的 窗 体 控 件 , 如 按钮 .文本 框 和 表 等 复杂 控件 ,还 包括 提供 常 
用 窗 体 功能 ,如 在 网 格 中 显示 数据 .选择 日 期 .显示 菜单 等 控件 。 常 见 的 Web 服务 器 控件 如 
图 8-4 所 示 。 


8-3 常见 的 HTML 服务 器 控件 


国 Image 

4 标准 目 ImageButton 

回 imageMap 

入 ”AdRotator A Label 

汪 BulletedUst 国 UnkButon 
Button 国 Ust8ox 
园 Calendar 贺 Literal 
国 checkBgox 臣 Localize 加 substitution 
眶 ”checkeoxlist 自 ”Mukiview 国 Table 
国 DropDownUst 园 Panel 国 TextBox 
息 Fleupload 加 placeHolder 贸 View 
痪 piddenfield © Radiogutton 和 Wizard 
A HyperLink 吐 RadioButtonUst Xml 


图 8-4 常见 的 Web 服务 器 控件 


除了 提供 HTML 服务 器 控件 的 上 述 所 有 功能 外 , Web 服务 器 控件 还 提供 以 下 附加 功 
能 : 功能 丰富 的 对 象 模型 ,该 模型 具有 类 型 安全 编程 功能 ; 自动 浏览 器 检测 ; 控件 可 以 检测 
浏览 器 的 功能 ,并 呈现 适当 的 标记 ; 对 于 某 些 控件 ,可 以 使 用 Templates 定义 自己 的 控件 布 
局 。 对 于 某 些 控件 ,可 以 指定 控件 的 事件 是 立即 发 送 到 服务 器 ,还 是 先 缓存 ,然后 在 提交 该 
页 时 引发 。 
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可 将 事件 从 赃 套 控件 (如 表 中 的 按钮 ) 传 递 到 容器 控件 。 控 件 使 用 类 似 如 下 的 语法 : 
<asp:button attributes runat = "server" id= "Button1" /> 


这 里 ,属性 不 是 HTML 元 素 的 属性 .而 是 Web 控件 的 属性 。 运 行 ASP. NET 网 页 时 ， 
Web 服务 器 控件 使 用 适当 的 标记 在 页 中 呈现 ,这 通常 不 仅 取决 于 浏览 器 类 型 ,还 与 对 该 控 
件 所 做 的 设置 有 关 。 例 如 ,TextBox 控件 可 能 呈现 为 input 标记 ,也 可 能 呈现 为 textarea 标 
记 , 具 体 取 决 于 其 属性 。 

1. 按钮 类 型 

在 ASP. NET 网 页 上 使 用 ASP. NET Button Web 服务 器 控件 使 用 户 可 以 指示 已 完成 
表单 或 要 执行 特定 的 命令 。Web 服务 器 控件 包括 3 种 按钮 ( 表 8-1) ,每 种 按钮 在 网 页 上 显 
示 的 方式 都 不 同 。 


表 8-1 3 种 按钮 


控 件 说 明 
ButtonWeb 服务 器 
控件 
LinkButtonWeb ” 服 | 呈现 为 页 面 中 的 一 个 超 链接 。 但 是 , 它 包 含 使 窗 体 被 发 回 服务 器 的 客户 端 脚 本 
务 器 控件 (可 以 使 用 HyperLink Web 服务 器 控件 创建 真实 的 超 链接 ) 
允许 将 一 个 图 形 指 定 为 按钮 。 这 对 于 提供 丰富 的 按钮 外 观 非常 有 用 。 
ImageButton 控件 还 查 明 用 户 在 图 形 中 单 击 的 位 置 ,这 时 能 够 将 按钮 用 作 图 像 
映射 





显示 一 个 标准 命令 按钮 ,该 按钮 呈现 为 一 个 HTML input 元 素 








ImageButtonWeb 服 
务 器 控件 





2. CheckBox 和 CheckBoxList Web 服务 器 控件 

CheckBox 控件 的 事件 。 在 单个 CheckBox 控件 和 CheckBoxList 控件 之 间 , 事 件 的 工 
作 方 式 有 所 不 同 。 单 个 CheckBox 控件 在 用 户 单 击 该 控件 时 引发 CheckedChanged 事件 。 
默认 情况 下 ,这 一 事件 并 不 导致 向 服务 器 发 送 页 面 ,但 通过 将 AutoPostBack 属性 设置 为 
True, 可 以 使 该 控件 强制 立即 发 送 。 不 论 CheckBox 控件 是 否 发 送 到 服务 器 ,可 能 都 不 必 为 
CheckedChanged 事件 创建 事件 处 理 程序 。 可 以 在 处 理 程序 中 测试 选中 了 哪个 复 选 框 。 通 
常 ,只 有 在 需要 知道 已 更 改 了 某 个 复 选 框 ,而 不 是 只 是 读 取 其 值 时 , 才 会 为 CheckedChanged 
事件 创建 一 个 事件 处 理 程 序 。 

CheckBox 控件 的 HTML 属性 。CheckBox 控件 向 浏览 器 呈现 时 ,将 分 为 两 部 分 : 表示 
复 选 框 的 input 元 素 和 表示 复 选 框 标题 的 单独 label 元 素 。 这 两 个 元 素 的 组 合 依次 包含 在 
span 元 素 中 。 在 对 CheckBox 控件 应 用 样式 或 属性 设置 时 ,设置 将 应 用 于 外 部 的 span 元 
素 。 例 如 ,如 果 设 置 了 控件 的 BackColor 属性 ,这 些 设置 将 应 用 于 span 元 素 , 因 此 对 内 部 的 
input 和 label 属性 均 有 影响 。 

有 时 ,可 能 需要 为 复 选 框 和 标签 单独 应 用 设置 。CheckBox 控件 支持 两 个 可 在 运行 时 
设置 的 属性 : InputAttributes 属性 和 LabelAttributes 属性 。 每 个 属性 分 别 允 许 向 input 和 
label 元 素 添 加 HTML 属性 。 设 置 的 属性 将 按 原样 传递 到 浏览 器 。 例 如 ,下 面 的 代码 示例 
演示 了 如 何 设置 input 元 素 的 属性 ,从 而 在 用 户 将 鼠标 指针 滑 过 它 时 ,只 有 复 选 框 (没有 标 
签 ) 更 改 颜色 。 
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3. BulletedList 服务 器 控件 

一 个 常用 的 HTML Web 页 面 元 素 是 项 目 符号 列表 中 的 一 组 项 。BulletedList 服务 器 
控件 可 以 按照 有 序 ( 使 用 HTML < ol > 元 素 ) 或 无 序 (使 用 HTML < ul > 元 素 ) 的 方式 显示 项 
目 符号 列表 。 另 外 ,该 控件 可 以 确定 用 于 显示 列表 的 样式 。 “United States 


sa United Kingdom 


BulletedList 控件 可 以 包含 任意 数量 的 < asp:ListItem > 控件 ,或 者 。Finland 


绑 定 到 某 类 数据 源 上 ,再 使 用 检索 出 的 内 容 进行 填充 。 2 
将 BulletedList 控件 从 * 工 具 箱 "面板 拖 放 到 ASPX 网 页 上 ,添加 如 下 ee 
代码 ,得 到 如 图 8-5 所 示 的 列表 样式 显示 。 8-5 列表 样式 显示 


<%@ Page Language = "C#" AutogventWireup= "true" CodeFile = "EX8 - 0.aspx.cs" Inherits= 
"EX8_0" %> 
<!DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<body> 
< form id= "form 1" runat = "server"> 
<asp:BulletedList ID = "Bulletedlist1" runat = "server"> 
<asp:ListItem> United States </asp:ListItem> 
<asp:ListItem > United Kingdom </asp:ListItem> 
<asp:ListItem> Finland </asp:ListItem> 
<asp:ListItem> Russia </asp:ListItem> 
<asp:ListItem> Sweden </asp:ListItem> 
<asp:ListItem> Estonia </asp:ListItem> 
</asp:BulletedList > 
</form> 
</body> 
</HTML> 
设置 BulletStyle 属性 ,以 指定 该 控件 是 将 列表 项 显示 为 项 目 符号 形式 ,还 是 编号 形式 。 
若 要 创建 编号 列表 ( 即 有 序列 表 ), 请 将 BulletStyle 属性 设置 为 下 列 枚 举 值 之 一 : 
Numbered、LowerAlpha、UpperAlpha、UpperRoman、LowerRoman。 若 要 创建 项 目 符号 列 
表 ( 即 无 序列 表 ) ,请 将 BulletStyle 属性 设置 为 下 列 值 之 一 : Disc、Circle 或 Square。 若 要 将 
项 目 符号 显示 为 自 定 义 图 像 ,请 将 BulletStyle 属性 设置 为 某 个 图 形 的 URL。 对 每 一 项 都 
会 显示 该 图 形 。 
4. Literal 控件 和 Label 控件 
Literal 控件 表示 用 于 向 页 面 添 加 内 容 的 几 个 选项 之 一 。 对 于 静态 内 容 , 无 须 使 用 容 
器 ,可 以 将 标记 作为 HTML 直接 添加 到 页 面 中 。 但 是 ,如 果 要 动态 添加 内 容 , 则 必须 将 内 
容 添 加 到 容器 中 。 典 型 的 容器 有 Label 控件 、Literal 控件 、Panel 控件 和 PlaceHolder 控件 。 
Literal 控件 与 Label 控件 的 区 别 在 于 ,Literal 控件 不 向 文本 中 添加 任何 HTML 元 素 。 
Label 控件 呈现 一 个 span 元 素 。 因 此 ,Literal 控件 不 支持 包括 位 置 属性 在 内 的 任何 样式 属 
性 。 但 是 ,Literal 控件 允许 指定 是 否 对 内 容 进行 编码 。 通 常情 况 下 , 当 和 希望 文本 和 控件 直 
接 呈 现在 页 面 中 而 不 使 用 任何 附加 标记 时 ,可 使 用 Literal 控件 。 
S。Panel 和 PlaceHolder 控件 
PlaceHolder Web 服务 器 控件 ,将 空 容器 控件 放置 到 页 内 ,然后 在 运行 时 动态 地 将 子 元 
素 添 加 到 该 容器 中 。 该 控件 只 呈现 其 子 元 素 ; 它 不 具有 自己 的 基于 HTML 的 输出 。 
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PanelWeb 服务 器 控件 在 Web 窗 体 页 内 提供 了 一 种 容器 控件 ,可 以 将 它 用 作 静 态 文 本 
和 其 他 控件 的 父 级 。Panel 控件 适用 于 : 

(1) 分 组 行为 。 通 过 将 一 组 控件 放 入 一 个 面板 ,然后 操作 该 面板 ,可 以 将 这 组 控件 作为 
一 个 单元 进行 管理 。 例 如 ,可 以 通过 设置 面板 的 Visible 属性 隐藏 或 显示 该 面板 中 的 一 组 
控件 。 

(2) 动态 控件 生成 。Panel 控件 为 在 运行 时 创建 的 控件 提供 了 一 个 方便 的 容器 。 

(3) 外 观 。Panel 控件 支持 BackColor 和 BorderWidth 等 外 观 属性 ,可 以 设置 这 些 属 
性 ,来 为 页 面 上 的 局 部 区 域 创 建 独特 的 外 观 。 

6. RadioButton 控件 和 RadioButtonList 控件 

如 果 要 对 RadioButton 控件 进行 分 组 ,就 要 使 用 到 其 GroupName 属性 ,GroupName 值 
相同 的 控件 被 认为 是 一 组 的 ,在 同一 组 RadioButton 控件 只 能 选择 一 项 ,但 RadioButton 控 
件 的 分 组 属性 GroupName 似乎 也 仅仅 是 起 分 组 的 作用 而 已 ,对 获取 选中 项 的 值 一 点 帮助 
都 没有 。 标 签 里 虽然 可 以 为 RadioButton 添加 GroupName 属性 来 控制 某 几 个 单 选 按钮 只 
能 同时 选 1 个 ,但 获取 RadioButton 的 数值 很 麻烦 ,不 能 依靠 GroupName 直接 获取 。 

而 使 用 RadioButtonList 是 更 好 的 方案 ,同一 个 RadioButtonList 的 选项 自然 被 认为 是 
一 组 ,并 且 获 取 选 中 项 的 值 也 比 RadioButton 好 多 了 。 

7. ListBox 控件 和 DropDownList 控件 

ListBox 控件 允许 用 户 从 预定 义 的 列表 中 选择 一 个 或 多 个 项 。 它 与 DropDownList 控 
件 的 不 同 之 处 在 于 , 它 不 但 可 以 一 次 显示 多 个 项 ,而 且 ( 可 选 ) 还 允许 用 户 选择 多 个 项 。 

DropDownListWeb 服务 器 控件 使 用 户 能 够 从 预定 义 的 列表 中 选择 一 项 。 它 与 ListBox 
Web 服务 器 控件 的 不 同 之 处 在 于 ,其 项 列表 在 用 户 单 击 下拉 按 钮 前 一 直 处 于 隐藏 状态 。 另 外 ， 
DropDownList 控件 与 ListBox 控件 的 不 同 之 处 还 在 于 它 不 支持 多 重 选择 模式 。 

8. View 控件 和 MultiView 控件 

MnultiView 控件 组 合 View 控件 ,主要 实现 的 是 网 站 视图 的 设计 及 显示 。 有 时 可 能 要 
把 一 个 Web 页 面 分 成 不 同 的 块 ,而 每 次 只 显示 其 中 一 块 .同时 ,又 能 方便 地 在 块 与 块 之 间 导 
航 。 该 技术 常用 于 在 一 个 静态 页 面 中 引导 用 户 完成 多 个 步骤 的 操作 。 块 是 页 面 中 某 区 域 的 
内 容 ,ASP. NET 提供 了 View 控件 对 块 进行 管理 。 每 个 块 对 应 一 个 View 控件 ,所 有 的 
View 对 象 都 包含 在 MultiView 对 象 中 。MultiView 中 每 次 只 显示 一 个 View 对 象 ,这 个 对 
象 称 为 活动 视图 。 

MultiView 控件 有 一 个 类 型 为 ViewCollection 的 只 读 属 性 View。 使 用 该 属性 可 获得 
包含 在 MultiView 中 的 View 对 象 集合 。 与 所 有 的 . NET 集合 一 样 ,该 集合 中 的 元 素 被 编 
入 索引 。MoultiView 控件 包含 ActiveViewIndex 属性 ,该 属性 可 获取 或 设置 以 0 开始 的 , 当 
前 活动 视图 的 索引 。 如 果 没 有 视图 是 活动 的 ,那么 ActiveViewIndex 为 默认 值 一 1。 

9. 其 他 控件 

xml 控件 用 于 显示 xml 文档 的 内 容 。 

Wizard 控件 用 于 创建 一 组 对 话 框 ,以 引导 用 户 通过 一 组 定义 好 的 步骤 完成 某 些 任务 。 

FileUpload 控件 ,包括 一 个 用 于 选择 文件 上 传 的 文件 浏览 器 及 相关 的 基础 构造 。 

AdRotator 控件 , 当 每 次 页 面 加 载 时 ,呈现 从 列表 中 随机 选择 的 图 片 。 

Calendar 控件 ,一 个 功能 完整 的 用 于 显示 和 选择 时 间 的 控件 。 
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8.3 ASP 的 常见 内 置 对 象 


8.3.1 Application 对 象 


如 果 需 要 在 ASP. NET 环境 下 的 应 用 程序 范围 内 共享 信息 ,可 以 使 用 来 自 
HttpApplictionStat 类 的 Application 对 象 。 它 可 以 在 多 个 请 求 .连接 之 间 共 享 公用 信息 ,也 
可 以 在 各 个 请 求 连接 之 间 充 当 信息 传递 的 管道 。 使 用 Application 对 象 保存 希望 传递 的 变 
量 。 由 于 在 整个 应 用 程序 生存 周期 中 ,Application 对 象 都 是 有 效 的 ,所 以 在 不 同 的 页 面 中 
都 可 以 对 它 进 行 存 取 , 就 像 使 用 全 局 变量 一 样 方便 。 

Application 对 象 特性 : 存储 的 物理 位 置 在 服务 器 内 存 ,可 以 存储 任意 类 型 和 任意 大 小 ， 
状态 使 用 的 范围 是 整个 应 用 程序 。 生 命 周 期 : 在 应 用 程序 开始 时 创建 (准确 地 说 ,是 在 用 户 
第 一 次 请 求 某 URL 时 创建 ) ,在 应 用 程序 结束 时 销毁 。 不 管 前 台 有 多 少 客户 打开 该 网 站 的 
页 ,有 多 少 客户 关闭 该 网 站 的 页 ,只 要 服务 器 端 不 关闭 该 网 站 ,Application 始终 都 存在 。 数 
据 总 是 存储 在 服务 端 ,安全 性 比较 高 ,但 不 易 存 储 过 多 数据 。 优 点 是 检索 数据 速度 快 ,但 缺 
乏 自 我 管理 机 制 ,数据 不 会 自动 释放 。 

Application 对 象 的 常用 属性 和 常用 方法 分 别 见 表 8-2 和 表 8-3。 


表 8-2 Application 对 象 的 常用 属性 


























属 性 说 明 
All 返回 全 部 的 Application 对 象 变 量 到 一 个 对 象 数组 
AlIKeys 返回 全 部 的 Application 对 象 变量 到 一 个 字符 串 数组 
Count 取得 Application 中 对 象 变量 的 数量 
Item Application 变量 名 称 传 回 的 内 容 值 


表 8-3 Application 对 象 的 常用 方法 

















方 法 说 明 
Add 新 增 一 个 Application 变量 值 
Clear 清空 全 部 Application 变量 值 
Get 变量 名 传 回 的 变量 值 
Set 更 新 Application 变量 值 
Lock 锁定 所 有 Application 变量 值 ,禁止 其 他 客户 修改 Application 对 象 的 属性 





UnLock 解除 锁定 Application 变量 ,允许 其 他 客户 修改 Application 对 象 的 属性 





在 Web 应 用 程序 的 生命 周期 期 间 ,应 用 程序 会 引发 可 处 理 的 事件 ,并 调用 可 重 写 的 特 
定 方法 。 若 要 处 理应 用 程序 事件 或 方法 ,可 以 在 应 用 程序 根 目 录 中 创建 一 个 名 为 Global. 
asax 的 文件 。 如 果 创 建 了 Global. asax 文件 ,ASP. NET 会 将 其 编译 为 从 HttpApplication 
类 派生 的 类 ,然后 使 用 该 派生 类 表示 应 用 程序 。 

HttpApplication 进程 的 一 个 实例 每 次 只 处 理 一 个 请 求 。 由 于 在 访问 应 用 程序 类 中 的 
非 静态 成 员 时 不 需要 将 其 锁定 ,这 样 可 以 简化 应 用 程序 的 事件 处 理 过 程 。 这 样 还 可 以 将 特 
定 于 请 求 的 数据 存储 在 应 用 程序 类 的 非 静 态 成 员 中 。 例 如 ,可 以 在 Global. asax 文件 中 定 
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义 一 个 属性 ,然后 为 该 属性 赋 一 个 特定 于 请 求 的 值 。 

通过 使 用 命名 约定 Application_event( 如 Application_BeginRequest) ,ASP. NET 可 在 
Global. asax 文件 中 将 应 用 程序 事件 自动 绑 定 到 处 理 程序 。 这 与 将 ASP. NET 页 方法 自动 
绑 定 到 事件 的 方法 类 似 。Application _ Start 和 Application End 方法 不 表示 
HttpApplication 事件 的 特殊 方法 。 在 应 用 程序 域 的 生命 周期 期 间 ,ASP. NET 仅 调 用 这 些 
方法 一 次 ,而 不 是 对 每 个 HttpApplication 实例 都 调用 一 次 。 

表 8-2 列 出 了 在 应 用 程序 生命 周期 期 间 使 用 的 一 些 事 件 和 方法 。 实 际 上 远 不 止 列 出 的 
这 些 事件 ,但 这 些 事件 是 最 常用 的 。Global. asax 负责 处 理应 用 程序 的 全 局 事件 。 打 开 文 
件 , 系 统 已 经 为 定义 了 一 些 事件 的 处 理 方法 ,如 表 8-4。 


表 8-4 Application 的 事件 
事 件 说 明 


请 求 ASP. NET 应 用 程序 中 第 一 个 资源 (如 页 ) 时 调用 。 在 应 用 程序 的 生命 周期 
期 间 仅 调用 一 次 Application_Start 方法 。 可 以 使 用 此 方法 执行 启动 任务 ,如 将 
Application_Start 数据 加 载 到 缓存 中 以 及 初始 化 静态 值 。 在 应 用 程序 启动 期 间 应 仅 设置 静态 数 
据 。 由 于 实例 数据 仅 可 由 创建 的 HttpApplication 类 的 第 一 个 实例 使 用 ,所 以 请 
勿 设置 任何 实例 数据 

在 应 用 程序 生命 周期 中 的 适当 时 候 引 发 。Application_Error 可 在 应 用 程序 生命 
周期 的 任何 阶段 引发 。 由 于 请 求 会 短路 ,因此 Application_EndRequest 是 唯一 
能 保证 每 次 请 求 时 都 会 引发 的 事件 。 例 如 ,如 果 有 两 个 模块 处 理 Application_ 
BeginRequest 事件 ,第 一 个 模块 引发 一 个 异常 , 则 不 会 为 第 二 个 模块 调用 
Application_BeginRequest 事件 。 但 是 ,会 始终 调用 Application_EndRequest 方 
法 ,使 应 用 程序 清理 资源 

Application_End 在 印 载 应 用 程序 前 对 每 个 应 用 程序 生命 周期 调用 一 次 








Application_ event 








Application 用 于 保存 所 有 用 户 的 公共 的 数据 信息 ,如 果 使 用 Application 对 象 , 一 个 需 
要 考虑 的 问题 是 任何 写 操作 都 要 在 Application_OnStart 事件 (global. asax) 中 完成 。 尽 管 
使 用 Application. Lock 和 Applicaiton. Unlock 方法 来 避免 写 操 作 的 同步 ,但 是 , 它 串 行 化 了 
对 Application 对 象 的 请 求 , 当 网 站 访问 量 大 的 时 候 , 会 产生 严重 的 性 能 瓶颈 ,因此 最 好 不 要 
用 此 对 象 保存 大 的 数据 集合 。 

【 例 8-1】 实现 一 个 网 站 访问 数量 统计 功能 。 

第 1 步 ,打开 VS 2013, 新 建 一 个 空 网 站 ,命名 为 AspWebsite。 然 后 右 击 网 站 ,选择 添 
加 新 项 ,如 图 8-6 所 示 。 选 择 全 局 应 用 程序 类 ,生成 Global. asax 文件 。 

第 2 步 ,在 Global. asax 文件 中 添加 如 下 代码 。 


< Script runat = "server"> 
void Application Start(object sender, EventArgs e) 
{ 
Application["count"] = 0; 
} 
void Session Start(object sender, EventArgs e) 
{ 
Application. Lock( ); 
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Application["count"] = (int)Application["count"]+1; 
Application. UnLock( ); 































} 
void Session End(object sender, EventArgs e) 
{ 
Application. Lock( ); 
Application["count"] = (int)Application["count"] — 1; 
Application. UnLock( ); 
} 
</script > 
[Eee 0 | 
1 BE be EI - 所 已 安 些 模 槐 (Ctrl +E) P-| 
Visual Basic 图 报表 向 号 Visual cs 。 ”类型 visual cs 
| 用 于 处 理 Web 应 用 程序 事件 的 类 
上 联机 by] 类 Visual Ce 
ME 关 司 Visual Cg 
| f 讽 郊 瑞 文 件 Visual Ce 
@E S87 siverightw wcr Bs Visual ce 
站 se Visual ce 
bE 
bY mxe Visusl cs 
国 文本 攀 标 Visual Ce 
国 xzxt# Vieual Ce ~ 
单 二 此 处 以 联机 并 查 抽样 板 。 
名称 (N); Globalasax 门 将 代码 族 在 单独 的 文件 中 [P) 
DD BG 




















图 8-6 ”添加 全 局 应 用 程序 类 


这 些 事 件 是 整个 应 用 程序 的 事件 ,和 某 一 个 页 面 没有 关系 。 
第 3 步 , 右 击 网 站 ,选择 添加 新 Web 窗 体 ,生成 文件 ,在 Ex8-1. aspx 页 面 中 添加 如 下 
代码 : 


<p> 您 是 第 < asp:Label ID = "Labell" runat = "server" Text = "Label"></asp:Label > 个 访客 !</p> 
第 4 步 , 在 Ex8-1. aspx. cs 文件 中 添加 如 下 代码 : 


protected void Page_Load(object sender, EventArgs e) 
Labell. Text = this.Application["count"].ToString(); 
} 


第 一 次 运行 程序 ,结果 为 “您 是 第 1 个 访客 !”"。 如 果 在 同一 人 台 计 算 机 的 相同 浏览 器 中 另 
外 打开 一 个 窗口 ,输入 程序 的 URL ,运行 结果 不 变 。 如 果 在 同一 台 计算 机 上 换 一 个 浏览 器 ， 
在 窗口 中 输入 程序 的 URL ,运行 结果 为 “您 是 第 2 个 访客 !”。 
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8.3.2 Response 对 象 


Respose 对 象 用 于 将 数据 从 服务 器 发 送 回 浏览 器 。 它 允许 将 数据 作为 请 求 的 结果 发 送 
到 浏览 器 ,并 提供 响应 的 信息 ,可 以 用 来 在 页 面 中 输入 数据 ,在 页 面 中 跳 转 ,还 可 以 传递 各 个 
页 面 的 参数 , 它 与 HTTP 的 相应 消息 对 应 。Response 对 象 的 常用 属性 见 表 8-5。 


表 8-5 Response 对象 的 常用 属性 




















属 性 含义 
Buffer 获取 或 者 设置 一 个 值 ,指示 是 否 缓冲 输出 ,并 在 完成 处 理 整 个 响应 之 后 将 其 发 送 
Cache 获取 Web 页 的 缓存 策略 ,如 过 期 时 间 、 保 密 性 
Charset 设 定 或 获取 HTTP 的 输出 字符 串 编码 
Expires 获取 或 设置 在 浏览 器 上 缓存 的 页 过 期 前 的 分 钟 数 
Cookies 获取 当前 请 求 的 Cookie 集合 
IsClientConnected | 传 回 客户 端 是 否 仍 然 和 Server 连接 





设 定 是 否 将 HTTP 的 内 容 发 送 至 客户 端 浏览 器 , 若 为 True, 则 网 页 将 不 会 传 至 











SuppressContent 客户 端 
默认 的 ContentType 为 text/HTML, 也 就 是 网 页 格式 ,<% response. 
ContentType= "text/ HTML" »%> 
显示 HTML 原 代 码 ,<% response. ContentType 二 "text/plain" %> 
显示 GIF images,<% response. ContentType ="image/gif" %> 
ContentType be 
显示 Word 文档 ,<% response. ContentType 二 "application/msword" %> 
显示 Excel 文 档 ,<% Response. ContentType 二 "application/vnd. ms-excel" %> 
显示 PowerPoint 文档 ,<% response. ContentType 一 "application/ ms-powerpoint"%> 
显示 PDF 文档 ,<% response. ContentType 二 "application/pdf" %> 
StatusCode HTTP 状态 代码 


(1) StatusCode 的 取 值 及 其 含义 。 

1xx, 表 示 信 息 提 示 。100-Continue 初始 的 请 求 已 经 接收 ,客户 应 当 继 续 发 送 请 求 的 其 
余部 分 。101 一 Switching Protocols 服务 器 将 遵从 客户 的 请 求 转换 到 另外 一 种 协议 。 

2xx- 这 类 代码 表示 成 功 处理 了 请 求 。 

3xx- 重 定向 ,客户 端 浏 览 器 必须 采取 更 多 操作 来 实现 请 求 。 

4xx- 客 户 端 错误 ,发 生 错 误 , 客 户 端 似乎 有 问题 。 

5xx- 服 务 器 错误 ,服务 器 由 于 遇 到 错误 而 不 能 完成 该 请 求 。 

Response 对 象 的 常用 方法 见 表 8-6。 

表 8-6 。 Response 对象 的 常用 的 方法 














方 ”法 含 义 
AddHeader 将 一 个 HTTP 头 添加 到 输出 流 
AppendToLog 将 自 定义 日 志 信 息 添 加 到 IIS 日 志文 件 
Clear 将 缓冲 区 的 内 容 清除 
End 将 目前 缓冲 区 中 所 有 的 内 容 发 送 至 客户 端 后 ,然后 关闭 
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续 表 
方 法 含 义 
Flush 将 缓冲 区 中 的 所 有 数据 发 送 到 客户 端 。 如 果 response. Buffer 为 False, 此 方法 会 
引起 一 个 run-time 错误 
将 网 页 重新 导向 另 一 个 地 址 ,在 页 面 打开 后 执行 页 面 重 定向 ,会 执行 当前 页 面 的 
Redirect 程序 
将 网 页 重新 导向 另 一 个 地 址 ,在 页 面 打 开 前 执行 页 面 重 定向 ,不 会 执行 当前 页 面 
AppendHeader 
的 程序 
Write 将 数据 输出 到 客户 端 
WriteFile 将 指定 的 文件 写 人 HTTP 内 容 输出 流 





Response 对 象 是 HttpRespone 类 的 一 个 实例 。 该 类 主要 封装 来 自 ASP. NET 操作 的 
HTTP 相应 信息 。Response 对 象 将 数据 作为 请 求 的 结果 从 服务 器 发 送 到 客户 浏览 器 中 ,并 
提供 有 关 响 应 的 消息 。 

(2) Response 对 象 通过 Write() 或 者 WriteFile() 方 法 在 页 面 上 输出 数据 。 输 出 的 对 象 
可 以 是 字符 .字符 数组 .字符 串 、 对 象 或 者 文件 。 利 用 WriteFile 方法 向 Web 页 面 输出 图 像 
文件 ,必须 先 通过 ContentType 属性 定义 文件 流 的 类 型 。 

【 话 法 】 

Response. ContentType = " image/JPEG" ; 

Response. WriteFile(" 图 像 的 文件 名 "); 


【 例 8-2】 Response 对 象 的 Write 和 WriteFile 方法 。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “文本 文件 ”, 名 称 设置 为 TextFile. txt。 

第 2 步 , 在 文本 框 TextFile. txt 中 输入 内 容 :“Response 对 象 的 Write 和 WriteFile 方 
法 ”。 

第 3 步 ,AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 选择 
“Web 窗 体 ”, 名 称 设置 为 Ex8-2. aspx, 并 设置 Ex8-2. asp 为 起 始 页 。 

第 4 步 , 在 Ex8-2. aspx. cs 文件 中 找到 Page_Load 函数 ,在 函数 中 输入 如 下 内 容 : 


protected void Page_Load(object sender, EventArgs e) 

{ 
charc = 'a'; 
string s = "用 Response 打印 字符 串 "; 
char[ ] chzray = (用 三 入， 全 7 生生 人 和 全 
Page p = new Page(); 
Response. Write( "输出 单个 字符 : " + c + "<hr/>"); 
Response. Write(" 输 出 一 个 字符 串 : " + s + "<hr/>"); 
Response. Write( "输出 字符 数组 : "); 
Response. Write(cArray, 0, cArray. Length); 
Response. Write( "< hr/>"); 
Response. Write(" 输 出 一 个 对 象 : " + p + "<hr/>"); 
Response. Write(" 输 出 一 个 文件 : " + "<hr/>"); 
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Response. WriteFile(@"~\TextFile. txt"); 
} 


程序 运行 结果 如 图 8-7 所 示 。 


输出 单个 字符 ，a 

输出 一 个 字符 串 ， 用 Response 打 印字 符 串 
输出 字符 数组 ， 用 Response 打 印字 符 数组 
输出 一 个 对 象 ，System Web. UI. Page 
输出 一 个 文件 ， 


Response 对 象 的 Write 和 Writegile 方法 





8-7 运行 结果 


【 例 8-3】〗 利用 WriteFile 方法 向 Web 页 面 输出 图 像 文件 。 


第 1 步 , 打 开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 


选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-3. aspx, 并 设置 Ex8-3. aspx 为 起 始 页 。 
第 2 步 ,把 图 像 文 件 复制 到 当前 目录 ,命名 为 picl. jpg。 
第 3 步 ,在 Ex8-3. aspx. cs 文件 中 找到 Page_Load 函数 ,在 函数 中 输入 如 下 内 容 : 


protected void Page_Load(object sender, EventArgs e) 


{ 
Response. ContentType = "image/JPEG"; 
Response. WriteFile(@"~\picl. jpg"); 
程序 运行 结果 如 图 8-8 所 示 。 


C 分 人 安 量 |] localhost 





图 8-8 运行 结果 


【 例 8-4】 利用 Response. BinaryWrite 方法 向 Web 页 面 输出 图 像 文 件 。 


第 1 步 , 打 开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
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选择 “Web 窗 体 ” ,名称 设置 为 Ex8-4. aspx, 并 设置 Ex8-4. aspx 为 起 始 
第 2 步 ,把 图 像 文件 复制 到 当前 目录 ,命名 为 picl. jpg。 
第 3 步 . 在 Ex8-3. aspx. cs 文件 中 添加 引用 “using System. 10;” 命 名 空间 。 
第 4 步 , 在 Ex8-4. aspx. cs 文件 的 Page_Load 函数 中 输入 如 下 内 容 : 





protected void Page Load(object sender, EventArgs e) 
{ 
FileStream fs = new FileStream(Server.MapPath("picl. jpg"),FileMode. Open); 





// 将 图 片 文件 存 于 文件 流 中 
long fslength = fs.Length; // 流 长 度 
byte[] b = new byte[ (int)fslength]; // 定 义 二 进 制 数 组 
fs. Read(b, 0, (int)fslength); // 将 流 中 的 字 节 写 入 二 进 制 数组 中 
fs.Close(); // 关 闭 流 
Response. ContentType = "image/jpg"; // 如 果 没 有 此 行 语句 , 则 会 出 现 乱码 
Response. BinaryWrite(b); // 将 图 片 输出 到 页 面 


} 
程序 运行 结果 如 图 8-9 所 示 。 


CG 个 个 | 注定 向 localhost- 2 





使 用 Response. Write() 方 法 将 JavaScript 脚本 写 入 客户 端 页 码 并 执行 。Alert 在 
JavaScript 中 用 于 提示 消息 ,如 在 C# 中 删除 数据 前 的 提示 : 





Response. Write("< script > alert( ' 确 定 需 要 删除 吗 ')</script >"); 
Window. open 用 户 打开 新 的 窗口 ,语法 为 

Response. Write("< script > Window. open(url, windowname)</script >"); 
Window. close 关闭 浏览 器 窗口 . 


Response. Write("< script > Window. close( )</script >"); 





(3) Response 对 象 通过 AppendHeader 方法 或 Redirect 方法 实现 页 面 跳 转 。 
【 话 法 】 


Response. AppendHeader (Name, Value); 
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Response. Redirect(" 重 定向 页 面 "); 


参数 Name 为 HTTP 规定 的 请 求 和 响应 消息 都 支持 的 头 域内 容 ,HTTP 头 是 页 面 通过 
HTTP 访问 页 面 时 ,最 先 响 应 的 请 求 和 响应 消息 ,如 HTTP 头 中 的 Location 用 于 将 页 面 重 
定向 到 另 一 个 页 面 ,与 Redirect 相似 。Value 为 HTTP 头 的 值 。Response. Redirect() 之 后 
的 代码 是 不 会 执行 的 。 

【 例 8-5】 利用 Response 实现 页 码 跳 转 。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-5. aspx, 并 设置 Ex8-5. aspx 为 起 始 页 。 

第 2 步 ,在 Ex8-5. aspx 中 添加 如 下 代码 : 


<form id= "form 1" runat = "server"> 


<p> 


<asp:Button ID = "Button1" runat = "server" OnClick = "Buttonl_Click" Text = " 跳 转 1" /> 
<asp:Button ID = "Button2" runat = "server" OnClick = "Button2_Click" Text = " 跳 转 2" /> 


</p> 
</form > 


第 3 步 , 在 Ex8-5. aspx. cs 中 添加 如 下 代码 : 


protected void Button2_Click(object sender, EventArgs e) 


{ 


Response. Redirect("http://www. sohu. com" ) ; 


} 


protected void Buttonl_Click(object sender, EventArgs e) 


{ 


Response. StatusCode = 302; // 出 现 该 状态 代码 时 ,浏览 器 能 够 自动 访问 新 的 URL 
Response. AppendHeader ("Location", "http://www. baidu. com" ); 


} 


8.3.3 ” Request 对 象 


Request 对 象 主 要 用 于 获取 来 自 客户 端的 数据 ,如 用 户 填 入 表单 的 数据 \ 保 存在 客户 端 
的 Cookie 等 。Request 对 象 的 主要 作用 包括 读 取 窗 体 变 量 , 读 取 查询 字符 串 变 量 , 取 得 
Web 服务 器 端的 系统 信息 ,取得 客户 端 浏览 器 信息 等 。 

Request 对 象 的 主要 属性 见 表 8-7。 


属 性 


表 8-7 Request 对 象 的 主要 属性 
含义 





ApplicationPath 


获取 服务 器 上 ASP. NET 应 用 程序 的 虚拟 应 用 程序 根 路 径 





获取 有 关 正 在 请 求 的 客户 端的 浏览 器 功能 的 信息 ,该 属性 值 为 














Browser 
HttpBrowserCapabilities 对 象 
ContentEncoding ”| 获取 或 设置 实体 主体 的 字符 集 ,表示 客 户 端的 字符 集 Encoding 对 象 
ContentLength 指定 客户 端 发 送 的 内 容 长 度 , 以 字 节 为 单位 
ContentType 获取 或 设置 传人 请 求 的 MIME 内 容 类 型 
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续 表 
属 性 含 义 
获取 客户 端 发 送 的 Cookie 集合 ,该 属性 值 为 表示 客户 端的 Cookie 变量 的 
Cookies 
HttpCookieCollection 对 象 
ER 获取 当前 请 求 的 虚拟 路 径 
FilePath 
FilePath 相对 于 IIS 的 虚拟 路 径 
Files 获取 客户 端 上 载 的 文件 集合 。 该 属性 值 为 HttpFileCollection 对 象 ,表示 客户 端 
上 载 的 文件 集合 
Form 获取 窗 体 变量 集合 
HttpMethod 获取 客户 端 使 用 的 HTTP 数据 传输 方法 (如 get、post 或 head) 
Item 获取 Cookies、Form、QueryString 或 ServerVariables 集合 中 指定 的 对 象 
Params 获取 Cookies、Form、QueryString 或 ServerVariables 项 的 组 合集 合 
Path 获取 当前 请 求 的 虚拟 路 径 
PathInfo 获取 具有 URL 扩展 名 的 资源 的 附加 路 径 信 息 





Physical Application- 
Path 


获取 当前 正在 执行 的 服务 器 应 用 程序 的 根 目录 的 物理 文件 系统 路 径 





PhysicalPath 


获取 与 请 求 的 URL 对 应 的 物理 文件 路 径 





QueryString 


获取 HTTP 查询 字符 串 变量 集合 。 该 属性 值 为 : NameValueCollection 对 象 , 它 
包含 由 客户 端 发 送 的 查询 字符 串 变量 集合 




















RequestType 获取 或 设置 客户 端 使 用 HTTP 数据 传输 的 方式 (get 或 post) 
ServerVariables 获取 Web 服务 器 变量 的 集合 

TotalBytes 获取 当前 输入 流 的 字 节 数 

Url 获取 有 关 当 前 请 求 URL 的 信息 

UserHostAddress 获取 远程 客户 端的 IP 主机 地 址 


1. 使 用 Request. 


Form 属性 读 取 窗 体 变 量 


HTMLForm 控件 的 Method 属性 的 默认 值 为 post。 在 这 种 情况 下 , 当 用 户 提交 网 页 


时 ,表单 数据 将 以 H" 


TTP 标 头 的 形式 发 送 到 服务 器 端 。 此 时 ,可 以 使 用 Request 对 象 的 


Form 属性 来 读 取 窗 体 变量 。 如 txtUserName 和 txtPassword 的 文本 框 控件 ,可 以 通过 以 
下 形式 来 读 取 它 们 的 值 : 


Request. Form ["txtUserName" ]; 
Request. Form ["txtPassword"] ; 


【 例 8-6】 
第 1 步 ,打开 As 


Request 对 象 的 主要 方法 。 


pWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 


选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-6. aspx, 并 设置 Ex8-6. aspx 为 起 始 页 。 
第 2 步 ,在 Ex8-6. aspx 文件 中 添加 如 下 代码 : 


< form id = "Form 1" action= "Ex8— 7.aspx" method= "post"> 


<div style= "text 
<hr style= "size: 
<div style= "text 


一 align:center"> 填写 用 户 信息 
50%"/> 
—align:left"> 


用 户 名 : < input name = "user_name" type = "text" /><br /> 
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密码 : < input name = "Password1" type = "password" /><br /> 
确认 密码 : < input name = "Password2" type= "password" /><br /> 
性 别 : < input name = "sex" type= "radio" value = " 女 " /> 女 
< input id= "Radiol" type= "radio" value = " 男 " name = "sex" /> 男 <br /> 
上 传 照片 : < input id= "Filel" type= "file" name = "picture"/> <br /> 
< input type = "submit" value= "提交 ”/> 
< input type = "reset" value = " 重 置 " /></div> 
</form > 


Ex8-6. aspx 的 页 面 如 图 8-10 所 示 。 














上 传 腿 片 ， 所 襄 柯 硕 写 车 量 ASP 击 元 - 
提交 | 重要 | 














8-10 ”Ex8-6. aspx 的 页 面 


第 3 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-7. aspx。 在 Ex8-7. aspx 的 Page_Load 事件 中 添加 如 下 
代码 : 


protected void Page_Load(object sender, EventArgs e) 


Response. Write(" 利 用 Response 对 象 获取 客户 端 数 据 "); 
Response. Write("< hr/>"); 

string[ ] names = Request.Form .AllKeys; 

for (int i = 0; i< names.Length; i++) 


string[ ] values = Request. Form .GetValues(i); 
for (int j = 0; j < values. Length; j++) 
Response. Write(names[i] + "=" + values[j] + "<br/>"); 


// 通 过 循环 表单 中 的 键 和 键 值 ,用 Response. Write 输出 





提交 后 ,Ex8-7. aspx 的 页 面 如 图 8-11 所 示 。 





利用 Response 对 象 获取 客户 端 数据 


user_name= 张 三 
Passwordl=123 
Password2=123 





sex= 男 
picture=D:\ 教 材 综 写 第 8 音 ASPWAspwebsiteypicl.JPG 


图 8-11 Ex8-7. aspx 的 页 面 


2. 使 用 Request. QueryString 属性 读 取 变量 
浏览 网 页 时 ,经 常 看 到 浏览 器 地 址 栏 中 显示 “xxx. aspx? id 一 8018" 之 类 的 URL, 其 中 
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xxx. aspx 表示 要 访问 的 . aspx 网 页 ,问号 (?) 后 面 的 内 容 便 是 查询 字符 串 ,其 作用 是 将 变量 
的 名 称 和 值 传送 给 ASP. NET 文件 来 处 理 。 查 询 字 符 串 变 量 可 以 通过 以 下 几 种 方式 生成 。 

方法 1, 若 将 HTMLForm 控件 的 Method 属性 设置 为 get, 则 当 用 户 提 交 网 页 时 , 窗 体 
数据 将 作为 查询 字符 串 变量 附 在 网 址 后 面 被 发 送 到 服务 器 端 。Get 方法 传送 的 数据 量 较 
小 ,不 能 大 于 2KB; get 方法 的 安全 性 非常 低 , 但 是 执行 效率 却 比 Post 方法 好 。 

方法 2, 使 用 < a >…</a > 标记 或 HyperLink 控件 创建 超 文本 链接 时 ,可 以 将 查询 字符 
串 放 在 目标 URL 后 面 , 并 使 用 问号 *?" 来 分 隔 URL 与 查询 字符 串 。 

方法 3, 调 用 Response. Redirect 方法 时 , 若 在 网 址 参数 后 面 附 有 变量 名 / 值 对 , 则 打开 
目标 网 页 时 这 些 变 量 值 附 在 该 网 址 后 面 被 发 送 到 服务 器 端 。 

方法 4, 在 浏览 器 地 址 栏 中 输入 请 求 URL 时 ,在 URL 后 输入 问号 “?” 和 查询 字符 串 。 
例如 : http://*…/t.aspx? Id 一 8018 。 

QueryString 的 主要 特点 是 简单 快捷 ,但 是 传递 的 值 会 显示 在 浏览 器 的 地 址 栏 上 面 , 考 
虑 到 安全 性 的 问题 ,需要 在 设置 值 的 时 候 进行 编码 , 取 值 时 候 进行 反 编 码 。 同 时 ， 
QueryString 是 不 能 传递 对 象 的 ,只 能 传递 string 字符 串 ,所 以 ,在 传递 一 些 对 安全 性 要 求 不 
高 的 数值 ,或 者 一 些 短小 的 字符 串 时 ,可 以 考虑 使 用 。 

使 用 Request. QueryString 属性 读 取 窗 体 变 量 的 方法 , 如 Request. QueryString 
["txtUserName" ]。QueryString 集合 检索 HTTP 查询 字符 串 中 变量 的 值 。 

【语法 】 

Request. QueryString(variable) [ (index) |Count] 


其 中 ,参数 variable 在 HTTP 查询 字符 串 中 指定 要 检索 的 变量 名 。 参 数 index 是 一 个 可 选 
参数 ,可 以 用 来 检索 variable 的 多 个 值 中 的 某 一 个 值 。 这 可 以 是 从 1 到 Request. 
QueryString( variable). Count 之 间 的 任何 整数 。 可 以 通过 分 析 和 检索 查询 字符 串 
Request，ServerVariables(" Query_ String") 获 得 Request. QueryString 集合 。Request. 
QueryString (参数 ) 的 值 是 出 现在 QUERY_STRING 中 所 有 参数 值 的 数组 ,通过 调用 
Request. QueryString (parameter). Count 可 以 确定 参数 有 和 多少 个 值 。 如 果 变 量 未 关联 多 
个 数据 集 , 则 计数 为 1。 如 果 找 不 到 变量 , 则 计数 为 0。 
例如 ,在 Ex8-6. aspx 中 新 添加 一 个 按钮 Buttonl ,并 在 Button1_Click 中 添加 如 下 代码 : 


protected void Buttonl_Click(object sender, EventArgs e) 
string querystr = "Zhangsan" 
Response. Redirect("Ex8— 7.aspx?a=" + querystr); 
} 


在 Ex8-7. aspx. cs 的 Page_Load 事件 中 添加 如 下 代码 : 
Response. Write(Request. QueryString[ "a" ]); 


3. 使 用 Request. Params 属性 读 取 窗 体 变 量 

不 论 HTML 的 Form 控件 的 Method 属性 取 什 么 值 ,都 可 以 使 用 Request 对 象 的 
Params 属性 来 读 取 窗 体 变 量 的 内 容 . 如 Request. Params[ "txtPassword"] 或 者 Request. 
[L"txtPassword"], 优 先 获取 GET 方式 提交 的 数据 , 它 会 在 QueryString、Form、 
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ServerVariable 中 都 按 先 后 顺序 搜寻 一 遍 。Request. Params 是 所 有 post 和 get 传 过 来 的 值 
的 集合 , Request. Params 是 一 个 集合 ,依次 包括 Request. QueryString、 Request. Form、 
Request. Cookies 和 Request。 ServerVariable。 当 使 用 Request. Params 的 时 候 ,这 些 集合 
项 中 最 好 不 要 有 同名 项 。 如 果 仅 仅 是 需要 Form 中 的 一 个 数据 ,但 却 使 用 了 Request, 而 不 
是 Request. Form, 那 么 程序 将 在 QueryString、ServerVariable 中 也 搜寻 一 遍 。 如 果 正 好 
QueryString 或 者 ServerVariable 里 面 也 有 同名 的 项 ,那么 得 到 的 就 不 是 想 要 的 值 了 。 

4. Request 对 象 取得 Web 服务 器 端的 系统 信息 

Request 对 象 使 用 ServerVariables 集合 对 象 保存 服务 器 端 系统 信息 ,这 些 信息 变量 包 
含 在 HTTP 头 部 中 随 HTTP 请 求 一 起 传送 。 使 用 Request 对 象 的 ServerVariables 集合 对 
象 取得 环境 变量 的 语法 如 下 : 

【语法 】 


Request. ServerVariables[ 环境 变量 名 ] 


常见 的 环境 变量 名 及 其 含义 见 表 8-8。 
表 8-8 常见 的 环境 变量 名 及 其 含义 









































环境 变量 名 含 义 
Request. ServerVariables("Url") 返回 服务 器 地 址 
Request. ServerVariables("Path_Info") 客户 端 提 供 的 路 径 信 息 
Request. ServerVariables("Appl_Physical_Path") | 与 应 用 程序 元 数据 库 路 径 相 应 的 物理 路 径 
Request. ServerVariables("Path_Translated") 通过 由 虚拟 至 物理 的 映射 后 得 到 的 路 径 
Request. ServerVariables("Script_Name") 执行 脚本 的 名 称 
Request. ServerVariables("Query_String") 查询 字符 串 内 容 
Request. ServerVariables(" Http_Referer") 请 求 的 字符 串 内 容 
Request. ServerVariables("Server_Port") 接收 请 求 的 服务 器 端口 号 
Request. ServerVariables("Remote_Addr") 发 出 请 求 的 远程 主机 的 IP 地 址 
Request. ServerVariables("Remote_Host") 发 出 请 求 的 远程 主机 名 称 
Request. ServerVariables("Local_Addr") 返回 接收 请 求 的 服务 器 地 址 
Request. ServerVariables("Http_Host") 返回 服务 器 地 址 
Request. ServerVariables("Server_Name") 服务 器 的 主机 名 、DNS 地 址 或 IP 地 址 





Request. 


ServerVariables("Request_Method") 


提出 请 求 的 方法 ,如 GET、HEAD、POST 等 





Request. 


ServerVariables("Server_Port_Secure") 


如 果 接 收 请 求 的 服务 器 端口 为 安全 端口 时 , 则 为 1， 
否则 为 0 











Request. ServerVariables("Server_Protocol") 服务 器 使 用 的 协议 的 名 称 和 版 本 
Request. ServerVariables("Server_Software") 应 答 请 求 并 运行 网 关 的 服务 器 软件 的 名 称 和 版 本 
Request. ServerVariables("All_Http") 客户 端 发 送 的 所 有 HTTP 标 头 ,前缀 为 HTTP_ 





Request. 


ServerVariables("All_Raw") 


客户 端 发 送 的 所 有 HTTP 标 头 ,其 结果 和 客户 端 发 
送 时 一 样 ,没有 前 级 HTTP 





Request. 


ServerVariables(" Appl_MD_Path") 


应 用 程序 的 元 数据 库 路 径 





Request. 


ServerVariables("Content_Length") 


客户 端 发 出 内 容 的 长 度 





Request. 


ServerVariables(" Https") 





如 果 请 求 穿 过 安全 通道 (SSL), 则 返回 ON; 如 果 请 
求 来 自 非 安 全 通道 , 则 返回 OFF 
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续 表 
环境 变量 名 含 义 
Request. ServerVariables("Instance_ID") JIS 实例 的 ID 号 
Request. ServerVariables("Instance_Meta_Path") | 响应 请 求 的 IIS 实例 的 元 数据 库 路 径 
Request. ServerVariables ( " Http _ Accept _ 返回 内 容 如 gzip sdeflate 
Encoding") 
Request. Roe (" Http _ Accept _ 返回 内 容 如 en-us 
Language") 
Request. ServerVariables(" Http_Connection") 返回 内 容 Keep-Alive 





Request. 


. ServerVariables(" Http_Cookie") 


返回 Cookie 内 容 





返回 内 容 : Mozilla/4. 0 (compatible; MSIE6. 0; 





























Request. ServerVariables("Http_User_Agent") 
WindowsNTS5. 1;SV1) 
Request. ServerVariables("Https_Keysize") 安全 套 接 字 层 连 接 关 键 字 的 位 数 ,如 128 
Request. ServerVariables("Https_Secretkeysize") | 服务 器 验证 私人 关键 字 的 位 数 , 如 1024 
Request. ServerVariables(" Https_Server_Issuer") 服务 器 证 书 的 发 行者 字段 
Request. ServerVariables("Https_Server_Subject") ”| 服务 器 证 书 的 主题 字段 
Request. ServerVariables("Auth_Password") esa 和 户 在 疙 得 对 天 竹中 国人 
Request. ServerVariables("Auth_Type") 人 风 且 十 时: 要 帮 归 用 于 栓 对 用 襄 
Request. ServerVariables("Auth_User") 获取 当前 用 户 登录 的 域 或 用 户 名 
Request. ServerVariables("Cert_Cookie") 唯一 的 客户 证 书 ID 号 
Request. ServerVariables("Cert_Flag") 客户 让 书 标 识 ,加 条 有 千 户 端 入 书 , 别 |bit0 被 设置 为 


0; 如 果 客 户 端 证 书 验证 无 效 ,bitl 被 设置 为 1 





























Request. ServerVariables("Cert_Issuer") 用 户 证 书 中 的 发 行者 字段 

Request. ServerVariables("Cert_Keysize") 安全 套 接 字 层 连接 关键 字 的 位 数 ,如 128 
Request. ServerVariables("Cert_Secretkeysize") 服务 器 验证 私人 关键 字 的 位 数 ,如 1024 

Request. ServerVariables("Cert_Serialnumber") 客户 证 书 的 序列 号 字段 

Request. ServerVariables("Cert_Server_Issuer") 服务 器 证 书 的 发 行者 字段 

Request, ServerVariables("Cert_Server_Subject") | 服务 器 证 书 的 主题 字段 

Request. ServerVariables("Cert_Subject") 客户 端 证 书 的 主题 字段 

Request. ServerVariables("Content_Type") 客户 发 送 的 form 内 容 或 HTTPPUT 的 数据 类 型 


S. Request 对 象 取得 客户 端的 浏览 器 信息 
通过 Request 对 象 获 得 Browser 属性 , 需要 利用 Browser 属性 生成 一 个 


HttpBrowserCapabilities 类 型 的 对 象 实例 。Request. Browser 的 常 


见 属 性 见 表 8-9 。 


表 8-9 Request. Browser 的 常见 属性 




















Browser 的 属性 含 和 
Request. Browser. Browser 检测 浏览 器 的 类 型 
Request. Browser. Version 检测 浏览 器 的 版 本 
Request. Browser. Cookies 检测 浏览 器 是 否 支 持 Cookies 
Request. Browser. VBScript 检测 浏览 器 是 否 支 持 VBScript 
Request. Browser. JavaScript 检测 浏览 器 是 否 支 持 JavaScript 
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续 表 
Browser 的 属性 含 名 
Request. Browser. ActiveXControls 检测 浏览 器 是 否 支持 ActiveX 插件 
Request. Browser. JavaApplets 检测 浏览 器 是 否 支 持 JavaApplet 
Request. Browser. Type 检测 浏览 器 名 称 和 版 本 号 
Request. Browser. MajorVersion 检测 浏览 器 的 主 版 本 号 
Request. Browser. MinorVersion 检测 浏览 器 的 次 版 本 号 
Request. Browser. Platform 检测 操作 平台 
Request. Browser. Beta 检测 浏览 器 是 不 是 测试 版 本 
Request. Browser. Crawler 检测 浏览 器 是 否 支 持 息 虫 
Request. Browser. AOL 检测 是 否 为 AOL( 美 国 在 线 ) 发 布 的 新 网 页 浏览 器 
Request. Browser. Win16 检测 是 否 为 Win16 
Request. Browser. Win32 检测 是 否 为 Win32 
Request. Browser. Frames 检测 是 否 支持 框架 
Request. Browser. Tables 检测 是 否 支持 表格 
Request. Browser. Cookies 检测 是 否 支 持 Cookies 
CDF(Channel Definition Form at) 是 Microsoft 在 IE 4.0 浏览 器 
Request. Browser. CDF 中 使 用 的 通道 定义 格式 的 XML 数据 
Request. Browser. ClrVersion 客户 端 . NET Framework 版 本 
【 例 8-7】 Request 对 象 的 ServerVariables 和 Browser 属性 。 


第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-8. aspx, 并 设置 Ex8-8. aspx 为 起 始 页 。 
第 2 步 ,在 Ex8-8.aspx 的 Page_Load 事件 中 添加 如 下 代码 : 


protected void Page Load(object sender, EventArgs e) 


{ 


Response. Write( Request. ServerVariables[ "LOCAL_ADDR" ]); 


Response. Write( "< br >"); 
Write( Request. ServerVariables["Remote_RDDR" ]); 


Write("< br >"); 


Response. 
Response. 
Response. Write( Request. ServerVariables[ "url"]); 
Write("< br >"); 

Write(Request. Browser. Type. ToString( )); 


Write("< br >"); 


Response. 
Response. 
Response. 
Response. 
HttpBrowserCapabilities bc = Request.Browser; 
Write("<p> Browser Capabilities:</p>"); 
Write("Type = " + bc.Type + "<br>"); 
Write("Name = ”+ bc.Browser + "<br>"); 


Write(Request. Browser. Platform .ToString()); 


Response. 
Response. 
Response. 
"+ bc.Version + "<br>"); 


Response. Write( "Version = 


Response. Write( "Major Version = 
Response. Write( "Minor Version = 
Write("Platform = 


Write("Is Beta = 


Response. 


Response. "+ bc.Beta + "<br>"); 


"+ bc.Platform + "<br>"); 


// 远 端 服务 器 的 地 址 


// 浏 览 器 所 在 主机 的 IP 地 址 


// 浏 览 器 的 类 型 


// 浏 览 器 所 在 的 平台 


" + bc.MajorVersion + "<br>"); 
" + bc.MinorVersion + "<br>"); 
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Response. Write("Is Crawler = " + bc.Crawler + "<br>"); 


Response. Write("Is AOL = 


"+ bc.AOL + "<br>"); 


Response. Write("Is Win16 = ”+ bc.Win16 + "<br>"); 
Response. Write("Is Win32 = " + bc.Win32 + "<br>"); 


Response. Write("Supports Frames = " + bc.Frames + "<br>"); 
Response. Write( "Supports Tables = " + bc.Tables + "<br>"); 
Response. Write("Supports Cookies = " + bc.Cookies + "<br>"); 


Response. Write(" Supports VB Script = ”+ bc. 
VBScript + "<br>"); 

Response. Write( "Supports JavaScript = " + bc. 
JavaScript + "<br>"); 


Response. Write("Supports Java Applets = " + bc. 
JavaApplets + "<br>"); 

Response. Write("Supports ActiveX Controls = " + 
bc. ActiveXControls + "<br>"); 

Response. Write("CDF = " + bc.CDF + "<br>"); 


} 


第 3 步 ,运行 结果 如 图 8-12 所 示 。 

6. 读 取 客户 端 Cookie 

Cookie 是 在 HTTP 下 服务 器 或 脚本 可 以 维护 客 
户 工作 站 上 信息 的 一 种 方式 。Cookie 是 由 Web 服务 
器 保存 在 用 户 浏览 器 上 的 小 文本 文件 , 它 可 以 包含 有 
关 用 户 的 信息 ,这 些 信息 以 名 / 值 对 的 形式 储存 在 文本 
文件 中 。 无 论 何 时 ,只 要 用 户 连 接 到 服务 器 , Web 站 点 
就 可 以 访问 Cookie 信息 。Cookie 保存 在 用 户 的 
Cookie 文件 中 ,当下 一 次 用 户 返 回 时 ,仍然 可 以 对 它 进 





127.0.0.1 
127.0.0.1 

/Ex 8-8.aspx 
InternetExplorerl1 
WinNT 


Browser Capabilities: 


Type = IntermetExplorerl1 
Name = InternetExplorer 
Version =11.0 

Major Version = 11 

Minor Version = 0 

Platform = WinNT 

Js Beta =False 

Is Crawler = False 

Is AOL = False 

ls Win16 = False 

ls Win32=Trme 

Supports Frames = True 
Supports Tables = True 
Supports Cookies = True 
Supports VB Script =False 
Supports JavaScript= True 
Supports Java Applets = False 
Supports ActiveX Controls = False 
CDF = False 


8-12 ”运行 结果 


行 调 用 。Cookies 集合 是 由 一 些 Cookie 对 象 组 成 的 。Cookie 对 象 的 类 名 为 HttpCookie。 


Request，Cookie 的 常见 属性 见 表 8-10。 


表 8-10 ”Request. Cookie 的 常见 属性 
































属 性 名 含 处 

Domain 获取 或 设置 Cookie 的 作用 域 ,接收 或 返回 一 个 String 值 

are 获取 或 设置 Cookie 是 否 安全 传输 ( 即 仅 通过 Https 传送 ) ,接收 或 返回 一 个 
bool 值 

Value 获取 或 设置 单个 Cookie 的 值 ,接收 或 返回 一 个 String 值 

Values 获取 Cookie 所 包含 的 键 值 对 的 集合 

Path 获取 或 设置 该 Cookie 作用 路 径 ,接收 或 返回 一 个 String 值 

Name 获取 或 设置 Cookie 的 名 称 ,该 值 接收 或 返回 一 个 String 值 
获取 或 设置 一 个 值 ,该 值 指定 Cookie 是 否 可 以 通过 客户 端 脚 本 访问 ,接收 或 返 

HttpOnly 
回 一 个 bool 值 

HasKeys 获取 一 个 值 ,通过 该 值 指示 Cookie 是 否 含有 子 键 ,返回 一 个 bool 值 

Expires 获取 或 设置 Cookie 的 有 效 时 间 ,接收 或 返回 一 个 DateTime 值 
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使 用 Cookie 保存 客户 端 浏览 器 信息 时 ,保存 时 间 的 长 短 取决 于 Cookie 对 象 的 Expires 
属性 ,可 以 根据 需要 设置 。 若 未 设置 Cookie 的 失效 日 期 , 则 它们 仅 保 存 到 关闭 浏览 器 为 止 。 
若 将 Cookie 对 象 的 Expires 属性 设置 为 DateTime. MaxValue, 则 表示 Cookie 永远 不 会 
过 期 。 

Cookie 存储 的 数据 量 的 大 小 有 限制 ,大 多 数 浏览 器 支持 的 最 大 容量 为 4096B, 因 此 不 要 
用 Cookie 来 保存 大 量 数据 。 并 非 所 有 浏览 器 都 支持 Cookie, 并 且 数 据 是 以 明文 形式 保存 在 
客户 端 计算 机 中 的 ,因此 最 好 不 要 用 Cookie 来 保存 敏感 的 未 加 密 数据 。 

ASP. NET 中 有 两 个 Cookies 集合 : Response. Cookies 和 Request. Cookies 集合 。 两 
者 的 作用 不 同 , 通 过 前 者 可 以 将 Cookie 写 入 客户 端 ,通过 后 者 可 以 读 取 存储 在 客户 端的 
Cookie。 

【 例 8-8〗 Cookie 的 保存 和 读 取 。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-9. aspx, 并 设置 Ex8-9. aspx 为 起 始 页 。 

第 2 步 ,在 Ex8-9. aspx 页 面 中 添加 如 下 代码 : 


<% @ Page Language = "C#" AutogventWireup= "true" CodeFile = "EX8 - 9.aspx.cs" Inherits = 
"EX8_9" %> 
<! DOCTYPE HTML > 
< HTML xmlns = "http://www.w3, org/1999/xHTML"> 
< head runat = "server"> 
< Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
</head> 
<body> 
<form id = "form 1" runat = "server"> 
<div> 
<div> 请 输入 登录 信息 </div> 
<div> 
<p> 用 户 名 <asp:TextBox ID = "UserName" runat = "server"></asp:TextBox ></p> 
<p> 密 码 <asp:TextBox ID = "Password" runat = "server"></asp:TextBox> </p> 
<p> Cookie 保存 <asp:DropDownList ID = "IfSave" runat = "server"> 
<asp:ListItem > 保存 </asp:ListItem>< asp:ListItem > 不 保存 </asp:ListItem></asp: 
DropDownList > 
</p> 
</div> 
<div><asp:Button ID = "submit" runat = "server" Text = "提交 " /></div> 
</div> 
</form> 
</body> 
</HTML > 


第 3 步 , 在 Ex8-9. aspx. cs 文件 中 添加 如 下 代码 ; 


protected void Page_Load(object sender, EventArgs e) 
{ 
HttpCookie cl Request. Cookies[ "UserName" ]; 
HttpCookie c2 Request. Cookies[ "Password" ]; 
证 (cl = mll || c2 1= mul1) 
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{ // 当 保存 完 cookie 后 (也 就 是 说 "保存 或 永久 保存 "), 才 会 输出 cookie 的 值 , 即 当 第 二 次 用 同 
// 一 浏览 器 打开 该 网 站 时 也 会 输出 其 值 
Response. Write(cl. Value + "欢迎 光临 "); 
} 
} 
protected void submit Click(object sender, EventArgs e) 
{ 
if (UserName. Text == "admin" && Password. Text == "123") 
{ 
Response. Write( "欢迎 光临 ”+ UserName. Text); 
Response. Cookies[ "UserName"].Value = UserName. Text; 
Response. Cookies["Password"].Value = Password. Text; 
证 (IfSave. SelectedItem. T == "保存 ") 
{// 默 认 cookies 失效 时 间 是 直到 关闭 浏览 器 , 如果 设 置 为 DateTime. MaxValue, 则 表示 
//Cookie 永 远 不 会 过 期 
Response. Cookies[ "UserName" ]. Expires 
Response. Cookies[ "Password" ]. Expires 


DateTime. MaxValue; 
DateTime. MaxValue; 


} 

else 

{//Cookie 永 不 保存 
Response. Cookies[ "UserName" ] .Expires = DateTime.Now; 
Response. Cookies[ "Password" ]. Expires = DateTime.Now; 


} 


7. Request. MapPath( ) 的 路 径 映 射 方法 

Request. MapPath(VirtualPath) 方 法 ,将 当前 请 求 的 URL 中 的 虚拟 路 径 VirtualPath 
映射 到 服务 器 上 的 物理 路 径 。 参 数 VirtualPath 指定 当前 请 求 的 虚拟 路 径 ,可 以 是 绝对 路 径 
或 相对 路 径 。 该 方法 的 返回 值 为 由 VirtualPath 指定 的 服务 器 物理 路 径 。 

假设 当前 的 网 站 目录 为 “D:\wwwroot”, 浏 览 的 页 面 路 径 为 “D:\wwwroot\company\ 
news\show. asp”。 在 show. asp 页 面 中 使 用 : 

Request，MapPath("./") ,返回 路径 为 “D:\wwwroot\company\news”。 

Request，MapPath("/") ,返回 路 径 为 “D:\wwwroot”。 

Request，MapPath("show. asp"), 返 回路 径 为 *“D:\wwwroot\company\news\show. 
asp”。 

Request. MapPath(string) 中 的 string 为 虚拟 目录 ,只 能 采用 Web 虚拟 目录 形式 ,不 允 
许 “../” 方 式 调用 ,只 能 是 “/”./”“/xx” 等 字符 串 。 

8. Request. SaveAs() 方 法 

Request. SaveAs ( Filename, includeHeaders ), 将 HTTP 请 求 保 存 到 磁盘 。 参 数 
Filename 指定 物理 驱动 器 路 径 ,includeHeaders 是 一 个 布尔 值 ,指定 是 否 应 将 HTTP 标 头 
保存 到 磁盘 。 

9. Request. Files 获取 文件 

对 于 文件 上 传 ,一 种 方法 是 使 用 ASP. NET 的 FileUpload 服务 器 端 控件 ,直接 使 用 
FileUpload1. PostedFile 获取 上 传 文件 框 的 文件 。 另 一 种 方法 是 使 用 HTML 控件 < input 
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type 一 "file" name 一 "picl” /> 在 表单 提交 ,ASP. NET 使 用 Request. Files 获取 。 

Request. Files. Count 表示 从 客户 端的 服务 端 控件 或 HTML 控件 传 了 多 少 个 文件 。 如 
果 文 件 上 传 框 中 没有 选择 文件 ,有 些 浏览 器 可 能 会 当 作 上 传 了 无 内 容 的 文件 。 

Request. Files[i]. ContentLength 获取 了 上 传 文件 的 大 小 ,以 字 节 为 单位 。 

Request. Files[i]. ContentType 获取 了 客户 端 发 送 的 文件 的 MIME 内 容 类 型 。 

Request. Files[i]. FileName 获取 上 传 文件 的 文件 名 。 

Request. Files[i. InputStream 获取 文件 流 。 

Request. Files[i]. SaveAs(string filename) 把 获取 的 文件 保存 到 服务 器 。 

上 面 的 Request. Files[ 计 也 可 以 是 Request. Files[ name |]。 

客户 端 实现 上 传 文件 的 功能 ,HTML 的 File 控件 需要 使 用 关闭 式 方法 , 即 添加 属性 
runat 一 "server"。 此 外 ,Form 窗 体 也 要 加 上 属性 runat 二 "server"。 如 : 


<form id = "form 1" method= "post" runat = "server"> 

< input id= "Filel" type= "file" name = "Filel" runat = "server"/> 
< input id = "Submit1" type = "submit" value = "submit" /> 

</form> 


【 例 8-9】 HTML 控件 File 的 关闭 式 文件 上 传 方法 。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-10. aspx, 并 设置 Ex8-10. aspx 为 起 始 页 。 

第 2 步 ,在 Ex8-10. aspx 中 添加 如 下 代码 : 


<%@ Page Language = "C#" RutoEventWireup = "true" CodeFile = "Ex8 - 10.aspx.cs" Inherits= 
"Ex_10" %> 
<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
< head runat = "server"> 
<Meta http - equiv= "Content - Type" content = "text/HTML; charset = utf - 8"/> 
</head> 
<body> 

<form id = "form 1" runat = "server" action= "Ex8— 10.aspx" > 

< input id = "Filel" type = "file" runat = "server"/> 
<div> 
<asp:Button ID = "Buttonl" runat ="server” OnClick ="Buttonl Click" Text =" 上 传 文 





























件 " 六 
</div> 
<asp:HyperLink ID = "HyperLink1" runat = "server"> HyperLink </asp:HyperLink > 
</form> 
</body> 下 浏览 
</HTML > HyperLink 


运行 结果 如 图 8-13 所 示 。 


_ 图 8-13 ”运行 结果 
第 3 步 , 在 Ex8-10. aspx. cs 中 添加 如 下 代码 : 
protected void Button1_Click(object sender, EventArgs e) 


{ 
if (Request. Files. Count > 0) 
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{ 

HttpPostedFile f = Request.Files[0]; 

f.SaveAs(Server. MapPath( "002. jpg")); 

this. HyperLinkl1. Text = "002.jpg"; 

this. HYperLink1. NavigateUrl = Server.MapPath("002.jpg"); 
} 


} 


在 ASP. NET 中 ,File 框 也 可 以 不 使 用 runat 二 "server" ,而 在 form 里 ,加 上 enctype 一 
"multipart/form-data" 也 可 以 实现 上 传 文件 到 服务 器 。 如 : 


< form id= "form 1" method = "post" enctype = "multipart/form - data" action = "d.aspx"> 
< input id = "Filel" type = "file" name = "Filel"/> 
< input id = "Submitl" type= "submit" value = "submit" /> 

</form > 


使 用 了 runat 二 "server" 的 form 编译 后 ,action 指向 本 身 的 网 页 。 而 没有 加 runat 一 
"server" 的 form 可 以 指向 一 个 网 页 ,这 样 可 以 实现 异 文 件 上 传 ,但 是 代码 就 简便 许多 。 异 
文件 上 传 的 d. aspx. cs 处 理 代码 如 下 : 


using System; 

using System. Data; 

using System. Configuration; 

using System. Collections; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Web. UI. WebControls. WebParts; 
using System. Web. UI. HTMLControls; 

public partial class d: System. Web. UI. Page 


protected void Page_Load(object sender, EventArgs e) 
{ 
if (Request. Files. Count > 0) 
{ 
HttpPostedFile f = Request.Files[0]; 
f. SaveAs(Server. MapPath("002. jpg") ); 
} 
’ 
} 


关闭 式 方法 ,File 控件 和 表单 Form 一 定 要 加 上 runat= server 属性 ,而 开放 式 方法 , 则 
File 控件 和 表单 Form 都 不 用 加 runat= server 属性 。 都 不 加 runat 王 "server", 即 写成 纯 
HTML 代码 。 所 以 ,在 form 中 加 入 method 王 post enctype 一 "mnultipart/ form-data"。 使 
用 表单 文件 域 (input type= "file") 时 ,在 PostBack 中 使 用 Request. Files 获取 不 到 文件 。 
经 研究 发 现 ,在 input 标签 中 使 用 runat 一 "server" 后 ,是 能 够 正常 获取 的 。 但 是 ,为 了 前 端 
的 元 素 ID 不 被 修改 ,尽量 不 使 用 runat 二 "server"。 要 让 form 能 够 传递 文件 ,必须 在 form 
标签 中 加 入 enctype 二 "multipart/form-data"。 


< form enctype = "multipart/form — data" ID = "form 1" runat = "server"> 
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< input type = "file" name = "filename" /> 
</form > 


若 在 input 中 使 用 了 runat 二 "server" ,那么 ASP. NET 会 自动 处 理 这 些 事情 。 
8.3.4 Server 对 象 


Server. MapPath( Path ) 方 法 将 指定 的 相对 或 虚拟 路 径 映射 到 服务 器 上 相应 的 物理 目 
录 上 ,参数 Path 是 指定 要 映射 物理 目录 的 相对 或 虚拟 路 径 。 若 Path 以 一 个 正 斜 杠 (/) 或 反 
斜 丁 (\) 开 始 , 则 MapPath 方法 返回 路 径 时 将 Path 视 为 完整 的 虚拟 路 径 。 若 Path 不 是 以 
斜 杠 开始 , 则 MapPath 方法 返回 同 . asp 文件 中 已 有 的 路 径 相 对 的 路 径 。 

Web 路 径 用 *./” 表 示 当 前 目录 ,用 “/” 表 示 根 目录 ,用 “../” 表 示 上 层 目 录 ( 相 对 当前 来 
说 )。 假 设 当 前 的 网 站 目录 为 “D:\wwwroot”, 浏 览 的 页 面 路 径 为 *“D:\wwwroot\company\ 
news\show. asp”。 在 show. asp 页 面 中 使 用 

Server. MapPath("./"), 返 回路 径 为 “D:\wwwroot\company\news”。 

Server. MapPath("/") ,返回 路 径 为 *“D:\wwwroot”。 

Server. MapPath("../"), 返 回路 径 为 “D:\wwwroot\company”。 

Server. MapPath (request. ServerVariables("Path_Info")) 返 回路 径 为 “D:\wwwroot\ 
company\news \show. asp”。 

Server. MapPath(string) 中 ,string 可 以 用 *../” 方 式 引 用 父 目录 ,甚至 可 以 将 此 目录 跳 
到 整个 Web 目录 外 ,如 假设 目录 “C:\WWWROOT” 为 Web 根 目 录 , 在 根 目录 文件 中 调用 
此 Server. MapPath(". . /xyz. gif"), 则 可 以 调用 Web 目录 外 的 脚本 、 资 源 等 。 

有 时 直接 用 Server. MapPath(string) 调 用 一 个 文件 比较 麻烦 ,因为 不 同 的 目录 中 调用 
同一 个 Server. MapPath(string) 函数 ,就 会 得 到 不 同 的 值 。 特 殊 情 况 ,需要 通过 判断 本 身 目 
录 层 次 ,才能 获取 正确 的 地 址 ,而 使 用 的 Request. MapPath(string) 就 可 以 调用 同一 个 目录 
文件 ,不 用 做 目录 判断 。 


8.3.5 Session 对象 


因为 HTTP 是 一 种 无 状态 协议 ,能 高 效 地 完成 服务 器 和 浏览 器 之 间 的 通信 任务 ,但 不 
能 通过 页 面 和 客户 端 保持 连接 ,无 法 得 知 用 户 浏览 状态 。 如 果 用 户 需 要 增加 一 些 信息 和 跳 
转 到 另外 的 页 面 , 原 有 的 数据 将 会 丢失 , 且 用 户 将 无 法 恢复 这 些 信息 。 为 此 ,引入 了 Session 
对 象 弥补 这 个 不 足 ,提供 在 服务 器 端 保 存 任何 类 型 对 象 和 用 户 对 象 的 信息 ,用 户 在 应 用 程序 
的 页 面 切换 时 ,Session 对 象 的 变量 不 会 被 清除 。 

Session 对 象 具 有 唯一 性 。 对 于 一 个 Web 应 用 程序 而 言 , 所 有 用 户 访问 到 的 
Application 对 象 的 内 容 是 完全 一 样 的 。Session 为 每 个 客户 端 都 独立 地 保存 ,存储 着 每 个 
客户 端的 基础 信息 。 而 不 同 用 户 会 话 访问 到 的 Session 对 象 的 内 容 则 各 不 相同 。Session 
可 以 保存 变量 ,该 变量 只 能 供 一 个 用 户 使 用 。 也 就 是 说 ,每 个 网 页 浏览 者 都 有 自己 的 
Session 对 象 变量 , 即 Session 对 象 具有 唯一 性 。 

Session 对 象 具 有 依赖 性 。Session 依赖 于 Cookies, 当 一 个 访问 者 将 Cookies 关闭 ,或 
者 浏览 器 不 支持 该 Cookies 时 , 则 一 个 会 话 将 无 法 被 启动 ,所 以 它 也 就 无 法 访问 一 个 
Session 对 象 。 


第 8 章 Asp 编程 “275 





使 用 Session 的 优点 : 能 在 整个 应 用 中 帮助 维护 用 户 状 态 和 数据 ,能 实现 存储 任何 类 型 
的 对 象 ,能 独立 地 保存 客户 端 数据 。 且 对 于 用 户 来 说 ,Session 是 安全 的 、 透 明 的 。 使 用 
Session 的 缺点 : 因为 Session 使 用 的 是 服务 器 的 内 存 , 所 以 在 用 户 量 大 的 时 候 会 成 为 性 能 
瓶颈 。 

1. Session 对 象 的 集合 

Session 对 象 包含 Contents 和 StaticObjects 两 个 集合 。Contents 中 存储 的 是 没有 用 
<OBJET> 标 签 定义 的 对 象 和 变量 ,而 StaticObjects 包含 的 是 用 < OBJET > 标签 定义 的 对 象 
和 变量 。 

Session. Contents 数据 集合 包含 了 Server. CreateObject() 方 法 创建 的 对 象 ,通过 
Session 对 象 声 明 建 立 的 变量 。 

【 话 法 】 

Session. Contents(key) 


key 用 于 指明 Session 变量 的 名 称 , 由 于 Contents 集合 是 Session 的 默认 集合 ,所 以 也 
可 通过 下 面 的 形式 访问 Contents 集合 。 


Session. (key) 


例如 ,把 "Donald Duck" 赋 值 给 名 为 username 的 Session 变量 ,Session[ "username" 
一 "Donald Duck"; 把 “50” 赋 值 给 名 为 age 的 Session 变量 : Session[ "age" ] 二 50。 

Session. StaticObjects 集合 包含 在 Global. asax 文件 中 使 用 < OBJECT > 标记 创建 的 所 
有 Session 级 对 象 和 变量 。Global. asax 是 一 个 非常 重要 的 文件 ,可 以 在 该 文件 中 指定 事件 
脚本 ,并 志明 具有 会 话 和 应 用 程序 作用 域 的 对 象 。 

利用 < OBJECT > 标记 创建 对 象 的 基本 语法 格式 为 

< OBJECT SCOPE = Scope RUNAT = Server ID = Identifier 

{PROGID = "progID"ICLASSID = "ClassID")> 

其 中 ,SCOPE 说 明 该 对 象 的 使 用 范围 ,在 Global. asax 中 有 两 个 取 值 : Application 和 
Session。 当 指定 为 Session 时 ,就 创建 了 一 个 Session 对 象 ; ID 用 于 指定 创建 对 象 实例 时 的 
名 字 ; PROGID 是 与 类 标识 相关 的 标识 ; ICLASSID 用 于 指定 COM 类 对 象 的 唯一 标识 。 
下 面 创建 一 个 名 为 FSO 的 Session 对 象 。 


< 0BJECT SCOPE = Session RUNAT = SeryerID = "FSO" PROGID = "ADODB. Connection"> </OBJECT > 

利用 Session 对 象 的 StaticObject 集合 ,可 以 访问 由 < OBJECT > 标记 创建 的 所 有 对 象 ， 
其 基本 语法 格式 为 

【语法 】 

Session. StaticObjects (key) 

其 中 ,key 指定 对 象 变量 的 名 称 。 

2. Session 的 属性 

SessionID 属性 是 服务 器 给 客户 端的 一 个 编号 , 当 一 台 WWW 服务 器 运行 时 ,可 能 有 若 
干 个 用 户 浏览 正在 运行 在 这 台 服 务 器 上 的 网 站 。 当 每 个 用 户 首次 与 这 台 WWW 服务 器 建 
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立 连接 时 , 就 与 这 个 服务 器 建立 了 一 个 Session, 同时 服务 器 会 自动 为 其 分 配 一 个 
SessionID, 用 以 标识 这 个 用 户 的 唯一 身份 。 这 个 SessionID 是 由 WWW 服务 器 随机 产生 的 
一 个 由 24 个 字符 组 成 的 字符 串 。 

Timeout 属性 以 分 钟 为 单位 为 该 应 用 程序 的 Session 对 象 指定 超时 时 限 。 如 果 用 户 在 
该 超时 时 限 内 不 刷新 或 请 求 网 页 , 则 该 会 话 将 终止 。 一 般 ASP 2. 0 默认 为 20min,ASP 3.0 
默认 为 10min。 如 果 和 希望 将 超时 的 时 间 间 隔 设置 得 更 长 或 更 短 ,可 以 设置 Timeout 属性 ,如 
Session. Timeout 二 5( 设 置 了 5min 的 超时 时 间 间 隔 ) 。 

3. Session 的 方法 

Session. Abandon() 方 法 ,可 以 立即 结束 Session ,允许 在 用 户 级 会 话 空间 中 删除 一 些 变 
量 。Abandon 方法 结束 当前 用 户 的 会 话 , 一 旦 当前 文件 结束 运行 , 则 将 销毁 当前 的 Session 。 
但 即使 调用 了 Abandon 方法 ,也 仍然 保存 该 文件 当前 的 会 话 变量 。 也 就 是 说 ,Abandon 方 
法 只 是 删除 所 有 存储 在 Session 对 象 中 的 对 象 和 变量 ,并 释放 它们 所 占用 的 资源 ,而 不 能 取 
消 Session 对 象 本 身 。 

4. Session 的 事件 

一 个 用 户 从 访问 ASP 应 用 程序 中 的 页 面 到 离开 该 应 用 程序 这 段 期 间 , 称 为 会 话 。 当 用 
户 第 一 次 请 求 应 用 程序 中 的 页 面 时 , Web 服务 器 会 自动 为 该 用 户 创 建 一 个 Session 对 象 ,这 
个 Session 对 象 会 一 直 保 持 ,直到 会 话 结束 。 通 过 Session 对 象 的 OnStart 事件 和 OnEnd 事 
件 编写 脚本 可 以 在 会 话 开始 和 结束 时 执行 指定 的 操作 。 可 以 在 全 局 文件 Global. asax 中 为 
这 两 个 事件 指定 脚本 。 当 会 话 开 始 时 ,服务 器 在 Global. asax 文件 中 查找 并 处 理 Session_ 
Start 事件 脚本 。 该 脚本 将 在 处 理 用 户 请 求 的 Web 页 之 前 处 理 。 会 话 结束 时 ,服务 器 将 处 
理 Session_End 事件 脚本 。 默 认 的 Global. asax 文件 内 容 如 下 : 





<$%@ Application Language = "C#" %> 
< Script runat = "server"> 
void Session_Start(object sender, EventArgs e) 
{ 
// 在 新 会 话 启动 时 运行 的 代码 
} 


void Session End(object sender, EventArgs e) 

{ 

// 在 会 话 结束 时 运行 的 代码 

// 注意 : 只 有 在 Web. config 文件 中 的 sessionstate 模式 设置 为 

// InProc 时 , 才 会 引发 Session_End 事件 .如 果 会 话 模式 设置 为 StateServer 
// 或 SQL Server, 则 不 引发 该 事件 

} 


</script > 

【 例 8-10】 基于 Session 的 值 传 递 。 

第 1 步 , 打 开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-11. aspx, 并 设置 Ex8-11. aspx 为 起 始 页 。 

第 2 步 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 选择 "Web 窗 体 ”, 名 称 设 
置 为 Ex8-12. aspx。 


第 8 章 Asp 编程 277 





第 3 步 , 在 Ex8-11. aspx 中 添加 如 下 代码 : 


<%@ Page Language = "C#" AutogventWireup= "true" CodeFile= "Ex8—11.aspx.cs" Inherits= 
"Ex8_11" %> 

<! DOCTYPE HTML > 

< HTML xmlns = "http://www.w3. org/1999/xHTML"> 

<body> 

< form id= "form 1" runat = "server"> 

<asp:Literal ID= "Literall" runat = "server" Text = "姓名 "></asp:Literal > 
<asp:TextBox ID = "Name" runat = "server"></asp:TextBox> 

<asp:Literal ID = "Literal2" runat = "server" Text = "了 -mail"></asp:Literal > 
<asp:TextBox ID = "Email" runat = "server"></asp:TextBox> 

<asp:Button ID = "Button1”runat = "server" Text = "提交 " OnClick = "Buttonl_Click" /> 
</form > 

</body> 

</HTML > 


第 4 步 , 在 Ex8-11. aspx 中 双击 “提交 ”按钮 , 转 入 Ex8-11. aspx. cs 文件 ,添加 如 下 


代码 : 


protected void Buttonl Click(object sender, EventArgs e) 
{ 

Session["name"] = Name.Text; 

Session["email"] = Email.Text; 

Response. Redirect( "Ex8 — 12.aspx"); 
J 


第 5 步 ,在 Ex8-12. aspx. cs 文件 中 添加 如 下 代码 : 


protected void Page_Load(object sender, EventArgs e) 

{ 

Response. Write(Session. SessionID + "</br>"); 

Response. Write("hello" + Session["Name"].ToString() + ",your e 一 mail is” + 
Session[ "Email"]); 

} 


第 6 步 ,运行 程序 ,在 Ex8-11. aspx 界面 中 输入 如 图 8-14 所 示 的 数据 , 单 击 “ 提 交 ” 按 


钮 ,得 到 如 图 8-15 所 示 的 结果 。 





姓名 








as2bylrfafdwwOmwlbznSlzz 
张 三 E-mail [zhangs@cslg edu cn || 提交 hello 张 三 ,your e-mail iszhangs@cslg .edu.cn 














图 8-14 输入 数据 图 8-15 运行 结果 


8.3.6 (Cookies 对 象 


Cookies 对 象 也 称 缓存 对 象 , 用 于 保存 客户 端 浏览 器 请 求 的 服务 器 页 面 ,也 可 用 于 存放 


非 敏感 性 的 用 户 信息 ,信息 保存 的 时 间 可 以 根据 用 户 的 需要 进行 设置 。Cookie 就 是 Web 
服务 器 保存 在 用 户 硬盘 上 的 一 段 文本 。Cookie 允许 一 个 Web 站 点 在 用 户 的 计算 机 上 保存 
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信息 ,并 且 随 后 再 取 回 它 。 信 息 的 片 的 以 * 键 / 值 ? 对 的 形式 存储 。 

Cookie 存储 的 数据 量 很 受 限 制 , 大 多 数 浏 览 器 支持 的 最 大 容量 为 4096B, 因 此 不 要 用 来 
保存 数据 集 及 其 他 大 量 数据 。Cookie 用 于 保存 客户 浏览 器 请 求 服务 器 页 面 的 请 求 信息 , 程 
序 员 也 可 以 用 它 存 放 非 敏感 性 的 用 户 信息 ,信息 保存 的 时 间 可 以 根据 需要 设置 。 并 非 所 有 
的 浏览 器 都 支持 Cookie, 并 非 数据 信息 都 是 以 文本 的 形式 存在 于 客户 端的 。Application、 
Session 和 Cookie 的 区 别 见 表 8-11。 





表 8-11 Application ,Session 和 Cookie 的 区 别 























对 和 象 信息 量 大 小 保存 时 间 应 用 范围 保存 位 置 

Application 任意 大 小 ns 所 有 用 户 服务 器 端 
用 户 活动 时 间 十 一 段 

Session 小 量 ,简单 的 数据 延迟 时 间 (一般 为 单个 用 户 服务 器 端 
20min) 

Cookie 小 量 , 简 单 的 数据 可 以 根据 需要 设 定 单个 用 户 客户 端 





由 于 并 非 所 有 的 浏览 器 都 支持 Cookie, 并 且 数 据 信息 是 以 明文 文本 的 形式 保存 在 客户 
端的 计算 机 中 ,因此 最 好 不 要 保存 敏感 的 .未 加 密 的 数据 ,否则 会 影响 网 站 的 安全 性 。 

有 两 种 类 型 的 Cookie: 会 话 Cookie(Session Cookie) 和 持久 性 Cookie。 前 者 是 临时 性 
的 ,一 旦 会 话 状 态 结束 , 它 将 不 复 存在 ; 后 者 则 具有 确定 的 过 期 日 期 ,在 过 期 之 前 ,Cookie 在 
用 户 的 计算 机 上 以 文本 文件 的 形式 存储 。 

在 服务 器 上 创建 并 向 客户 端 输出 Cookie 可 以 利用 Response 对 象 实现 。Response 对 象 支 
持 一 个 名 为 Cookies 的 集合 ,可 以 将 Cookie 对 象 添加 到 该 集合 中 ,从 而 向 客户 端 输出 Cookie。 
通过 Request 对 象 的 Cookies 集合 访问 Cookie, 具 体 方法 参见 8. 3. 3 节 Request 对 象 。 

1.Cookies 的 属性 

Cookies. Expires 属性 , 设 定 Cookie 变量 的 有 效 时 间 ,默认 是 1000min, 若 设置 为 0, 则 
可 以 实时 删除 Cookie 变量 。 如 果 没 有 设置 Cookie 失效 日 期 ,它们 仅 保 存 到 关闭 浏览 器 程 
序 为 止 。 如 果 将 Cookie 对 象 的 Expires 属性 设置 为 Minvalue, 则 表示 Cookie 永远 不 会 
过 期 。 

Cookies. Name 属性 ,取得 Cookie 变量 名 称 。Cookies. Value 属性 ,获取 或 设置 Cookie 
变量 的 内 容 值 。 每 个 Cookie 是 HttpCookie 类 的 一 个 实例 ,创建 Cookie 时 .需要 指定 Name 
和 Value 属性 。 

Cookies. Path 属性 ,获取 或 设置 Cookie 只 用 的 URL。 

2. Cookie 常用 方法 

Cookie. Add() ,增加 Cookie 变量 ,将 指定 的 Cookie 保存 到 Cookies 集合 中 。 

Cookie. Clear() ,清除 Cookie 集合 中 的 变量 。 

Cookie. Get() ,通过 变量 名 或 索引 得 到 Cookie 变量 的 值 。 

Cookie. Remove() ,通过 Cookie 变量 名 或 索引 删除 Cookie 对 象 。 

Cookie. Equals() ,指定 Cookie 是 否 等 于 当前 的 Cookie。 

Cookie. ToString() ,返回 此 Cookie 对 象 的 一 个 字符 串 表示 形式 。 
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【 例 8-11】 Session 使 用 实例 。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-13. aspx, 并 设置 Ex8-13. aspx 为 起 始 页 。 

第 2 步 ,在 Ex8-13. aspx. cs 文件 中 添加 如 下 代码 : 


protected void Page Load(object sender, EventArgs e) 
{ 


HttpCookie cookie = new HttpCookie("id","234"); // 创 建 Cookie 的 实例 

Cookie. Expires = DateTime. Now. AddMonths(5); // 设 置 Cookie 的 过 期 时 间 , 5min 
后 过 期 , 自动 清除 文件 

Response. Cookies. Add( cookie); // 将 创建 的 Cookie 文件 输入 到 浏 
览 器 端 

Response. Write(Request. Cookies["id"].Value+ "</br >"); // 读 取 Cookie 文件 中 存储 的 值 

Response. Write(Request. Cookies["id"]. Path); // 读 取 Cookie 的 路 径 


} 
第 3 步 ,运行 程序 。 输 出 结果 为 


234 


8.3.7 ”Page 对 象 


Page 类 与 扩展 名 为 . aspx 的 文件 相关 联 ; 这 些 文件 在 运行 时 被 编译 为 Page 对 象 ,并 被 
缓存 在 服务 器 内 存 中 。 如 果 是 使 用 代码 隐藏 技术 创建 Web 窗 体 页 ,请 从 该 类 派生 ,如 
public partial class _Default: System. Web. UI. Page。Page 对 象 充当 页 中 所 有 服务 器 控件 
的 命名 容器 。 代 码 隐藏 源 文件 声明 了 一 个 从 基 页 类 继承 的 分 部 类 。 基 页 类 可 以 是 Page, 也 
可 以 是 从 Page 派生 的 其 他 类 。 分 部 类 允许 代码 隐藏 文件 使 用 页 中 定义 的 控件 ,而 无 须 将 其 
定义 为 字段 成 员 。 例 如 ,Ex8-13. aspx. cs 中 Page 使 用 : 


using System; 
using System. Collections. Generic; 
using System. Ling; 
using System. Web; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
public partial class EX8_13: System. Web. UI. Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
} 
} 


代码 隐藏 源 文件 Ex8-13. aspx. cs 对 应 的 . aspx 文件 如 下 : 


<%@ Page Language = "C 井 ”RutoEventWireup = "true" CodeFile = "EX8— 13.aspx.cs" Inherits= 
"EX8_13" %> 


必须 使 用 @ Page 指令 并 使 用 Inherits 和 CodeFile 属性 将 代码 隐藏 文件 链接 至 . aspx 
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文件 。 在 此 示例 中 ,Inherits 属性 指示 EX8_13 类 ,CodeFile 属性 指示 包含 该 类 的 语言 特定 
的 文件 的 路 径 。Page 对 象 的 常见 属性 、 方 法 和 事件 分 别 见 表 8-12、 表 8-13 和 表 8-14 所 示 。 


表 8-12 ”Page 对 象 的 常见 属性 















































属性 名 称 说 明 

获取 或 设置 错误 页 ,发 生 未 处 理 的 页 异常 的 事件 时 ,请 求 浏览 器 将 被 重 定向 到 

ErrorPage 该 页 

Form 获取 页 的 HTML 窗 体 

Header 在 网 页 的 head 元 素 声 明 中 ,用 runat 二 server 定义 了 文档 的 标 头 

ID 已 重 写 。 获 取 或 设置 Page 类 的 特定 实例 的 标识 符 

IsPostBack 获取 一 个 值 , 该 值 指示 该 页 是 否 正 为 响应 客户 端 回 发 而 加 载 , 或 者 它 是 否 正 被 首 
次 加 载 和 访问 

IsValid 获取 一 个 值 ,该 值 指示 页 验证 是 否 成 功 

Request 获取 请 求 的 页 的 HttpRequest 对 象 

二 获取 与 该 Page 对 象 关 联 的 HttpResponse 对 象 。 该 对 象 将 HTTP 响应 数据 发 送 
到 客户 端 ,并 包含 有 关 该 响应 的 信息 

Server 获取 Server 对 象 ,是 HttpServerUntility 类 的 实例 

Session 获取 ASP. NET 提供 的 当前 Session 对 象 

ClientQueryString | 获取 请 求 的 URL 的 查询 字符 串 部 分 

Cache 获取 与 该 页 驻 留 的 应 用 程序 关联 的 Cache 对 象 

Buffer 设置 指示 是 否 对 页 输出 进行 缓冲 处 理 的 值 

Application 为 当前 Web 请 求 获取 HttpApplicationState 对 象 


Page. IsPostBack 是 一 个 标志 : 当前 请 求 是 否 第 一 次 打开 。 调 用 方法 为 Page. 
IsPostBack 或 者 IsPostBack 或 者 this. IsPostBack 或 者 this. Page. IsPostBack, 它们 是 等 
价 的 。 

通过 浏览 器 的 地 址 栏 等 方式 打开 一 个 URL 时 是 第 一 次 打开 页 面 。 当 通过 页 面 的 提交 
按钮 或 能 引起 提交 的 按钮 以 POST 方式 提交 服务 器 请 求 时 ,就 不 再 是 第 一 次 打开 页 面 了 ， 
每 单 击 一 次 按钮 ,都 是 一 次 加 载 。 判 断 一 个 Page 是 否 第 一 次 打开 的 方法 : Request. Form. 
Count > 0。IsPostBack 只 有 在 第 一 次 打开 的 时 候 是 False, 其 他 时 候 都 是 True。 每 次 用 户 
回 传 服务 器 任何 信息 的 时 候 , 都 会 引发 isPostBack 属性 ,用 来 判断 此 用 户 是 否 为 第 一 次 打 
开 。 每 次 页 面 Load 的 时 候 , 根 据 需要 把 每 次 都 要 加 载 的 代码 放 在 IsPostBack 中 ,只 需要 加 
载 一 次 的 代码 放 在 if(1IsPostBack) 中 。 

一 些 需要 特殊 处 理 的 页 面 打 开 方 式 , 包 括 Server. Transfer、 Response. Redirect、 
CrossPagePostBack、Server. Execute, 发 生 了 页 面 元 素 变化 及 重新 编译 。 使 用 Server. 
Transfer 进行 迁移 时 ,迁移 到 的 页 面 其 IsPostBack 二 false。 使 用 Response. Redirect 方式 向 
自 页 面 迁移 时 ,此 时 IsSPostBack 王 false。 使 用 Server. Execute 迁移 到 的 页 面 其 IsPostBack 
一 false。 

【 例 8-12】 IsPostBack 判断 第 一 次 打开 页 面 。 

第 1 步 , 打 开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-14. aspx, 并 设置 Ex8-14. aspx 为 起 始 页 。 

第 2 步 ,在 EX8-14. aspx 文 件 中 添加 一 个 提交 按钮 ,代码 如 下 : 
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< 外 四 Page Language = "C 井 "RutoEventWireup = "true" CodeFile = "EX8— 14.aspx.cs" Inherits = 
"EX8_14" %> 
<! DOCTYPE HTML > 
< HTML xmlns = "http://www.w3. org/1999/xHTML"> 
< head runat = "server"> </head > 
<body> 
< form id = "form 1" runat = "server"> 
<asp:Button ID = "Button1"”runat = "server" Text = "提交 " /> 
</form > 
</body> 
</HTML > 


第 3 步 ,在 EX8-14. aspx. cs 文件 中 添加 如 下 代码 : 


Pprotected void Page_Load(object sender, EventArgs e) 
{ if (!IsPostBack) 

{ Response. Write(" 第 一 次 提交 !"); 

} 
else 
{ Response. Write(" 不 是 第 一 次 提交 !"); 
. 

} 


第 4 步 ,运行 程序 ,输出 :“ 第 一 次 提交 !”; 单 击 “ 提 交 ” 按 钮 ,输出 :“ 不 是 第 一 次 
提交 !”。 
表 8-13 Page 对 象 的 常见 方法 





















































方 法 说 明 
DataBind 将 数据 源 绑 定 到 被 调用 的 服务 器 控件 及 其 所 有 子 控件 
Dispose 从 内 存 中 清理 服务 器 控件 ,释放 资源 
Equals 确定 两 个 Object 实例 是 否 相 等 
FindControl 在 页 命名 容器 中 搜索 指定 的 服务 器 控件 
Focus 为 控件 设置 输入 焦点 
GetDataltem 获取 位 于 数据 绑 定 上 下 文 堆栈 顶部 的 数据 项 
HasControls 确定 服务 器 控件 是 否 包含 任何 子 控件 
MapPath 检索 虚拟 路 径 ( 绝 对 的 或 相对 的 ?或 应 用 程序 相关 的 路 径 映 射 到 的 物理 路 径 
ParseControl 将 输入 字符 串 分 析 为 Web 窗 体 页 或 用 户 控件 上 的 Control 对 象 
ProcessRequest 设置 Page 的 内 部 ,如 Context、Request、Response 和 Application 属性 
ReferenceEquals 确定 指定 的 Object 实例 是 否 是 相同 的 实例 
RenderControl 已 重 载 。 输 出 服务 器 控件 内 容 , 并 存储 有 关 此 控件 的 跟踪 信息 
ResolveClientUrl 获取 浏览 器 可 以 使 用 的 URL 
SetFocus 将 浏览 器 焦点 设置 为 指定 控件 
ToString 返回 表示 当前 Object 的 String 
Validate 指示 该 页 上 所 有 验证 控件 指派 的 信息 
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事件 名 称 


表 8-14 Page 对 象 的 常见 事件 
说 明 





Disposed 


当 从 内 存 释放 服务 器 控件 时 发 生 ,这 是 请 求 ASP. NET 页 时 服务 器 控件 生 
存 期 的 最 后 阶段 





Error 


当 引 发 未 处 理 的 异常 时 发 生 





Init 


当 服 务 器 控件 初始 化 时 发 生 ; 初始 化 是 控件 生存 期 的 第 一 步 





InitComplete 


在 页 初始 化 完成 时 发 生 


























Load 当 服 务 器 控件 加 载 到 Page 对 象 中 时 发 生 

LoadComplete 在 页 生命 周期 的 加 载 阶段 结束 时 发 生 

PreInit 在 页 初始 化 开始 时 发 生 

PreLoad 在 页 Load 事件 之 前 发 生 

PreRender 在 加 载 Control 对 象 之 后 .呈现 之 前 发 生 

PreRenderComplete 在 呈现 页 内 容 之 前 发 生 

SaveStateComplete 在 页 已 完成 对 页 和 页 上 控件 的 所 有 视图 状态 和 控件 状态 信息 的 保存 后 发 生 
Unload 当 服 务 器 控件 从 内 存 中 印 载 时 发 生 





Page 的 常用 事件 执行 顺序 : Page. PreInit( 在 页 初始 化 开始 时 发 生 ) 一 Page. Init( 当 服 
务 器 控件 初始 化 时 发 生 ; 初始 化 是 控件 生存 期 的 第 一 步 ) 一 Page. InitComplite( 在 页 初始 化 
完成 时 发 生 )-Page. PreLoad (在 页 Load 事件 之 前 发 生 ) 一 Page. Load( 当 服务 器 控件 加 载 
到 Page 对 象 中 时 发 生 ) 一 Page. LoadComplete (在 页 生命 周期 的 加 载 阶段 结束 时 发 生 ) 一 
Page. PreRender (在 加 载 Control 对 象 之 后 ,呈现 之 前 发 生 ) 一 Page. PreRenderComplete 
(在 呈现 页 内 容 之 前 发 生 )。 


8.4 ADO. NET 数据 库 访 问 技术 


ActiveX 数据 对 象 (ActiveX Data Objects, ADO) 是 Microsoft 提出 的 应 用 程序 接口 
(APD ,用 以 实现 访问 数据 库 中 的 数据 ,ADO 来 自 原来 的 Microsoft 数据 接口 远程 数据 对 象 
(RDO) 。ADO. NET 是 改进 的 ADO 数据 访问 模型 用 于 开发 可 扩展 应 用 程序 ,专门 为 可 伸缩 
性 、 无 状态 和 XML 核心 的 Web 而 设计 的 。ADO. NET 使 用 一 些 ADO 对 象 ,如 Connection 和 
Command 对 象 , 也 引入 了 一 些 新 对 象 ,包括 DataSet,DataReader 和 DataAdapter。 

ADO.NET 和 ADO 的 数据 架构 的 重要 区 别 在 于 DataSet 对 象 DataSet 功能 能 够 作为 
独立 的 实体 ,在 DataSet 内 部 ,就 像 一 个 数据 库 一 样 ,有 表 、 列 关系、 约束、 视图 等 。 

ADO. NET 有 两 种 类 型 的 对 象 : 

(1) 基于 连接 的 对 象 ,如 Connection、Command、DataReader 和 DataAdapter, 它 们 连接 
到 数据 库 , 执 行 SQL 语句 ,基于 连接 的 对 象 是 针对 具体 数据 源 类 型 的 ,并 且 可 以 在 各 自 的 命 
名 空间 中 (如 SQL Server 提供 程序 的 System. Data. SqlClient) 找 到 。 

(2) 基于 内 容 的 对 象 : 包括 DataSet DataColumn DataRow 、 DataRelation 等 ,它们 完 
全 和 数据 源 独立 ,出 现在 System. Data 命名 空间 里 。ADO. NET 的 最 重要 命名 空间 见 
表 8-15。 
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表 8-15 ADO.NET 的 最 重要 命名 空间 


命名 空间 介 绍 
System. Data 关键 数据 容器 类 ,包括 列 、 关 系 、 表 ,数据 集 , 行 、 视 图 和 约束 建立 模型 
包括 大 部 分 基本 的 抽象 类 ,这 些 类 实现 System. Data 中 的 某 些 接口 ,并 定义 了 
ADO. NET 的 核心 功能 。 数 据 提供 程序 继承 这 些 类 来 创建 它们 自己 的 版 本 
System. Data. OleDb 包含 用 于 连接 OLE DB 提供 程序 的 类 。 这 些 类 支持 大 部 分 OLE DB 提供 程序 
包含 用 于 连接 微软 SQL Server 数据 库 所 需 的 类 ,这 些 类 经 过 优化 ,以 便 使 用 
SQL Server 的 TDS 接口 
System. 包含 用 于 连接 Oracle 数据 库 的 类 ,这 些 类 使 用 经 过 优化 的 Oracle 调用 接口 
Data. OracleClient (OCD 
包含 连接 大 部 分 ODBC 驱动 所 需 的 类 。 所 有 数据 源 都 包含 ODBC 驱动 ,并 可 
以 通过 “控制 面板 ”中 的 “数据 源 ” 快 捷 方式 配置 
包含 SQL Server 本 地 数据 类 型 对 应 的 类 型 。 这 些 类 不 是 必需 的 ,但 它们 提供 
了 一 种 使 用 标准 . NET 数据 类 型 的 选择 ,这 是 自动 类 型 转换 时 必需 的 








System. Data. Common 








System. Data. SqlClient 








System. Data. Odbc 





System. Data. SqlTypes 





8.4.1 Connection 对 象 


Connection 对 象 ,表示 与 特定 数据 源 的 连接 。 对 于 ADO. NET 而 言 , 不 同 的 数据 源 对 
应 不 同 的 Connection 对 象 。Connection 的 不 同 对 象 见 表 8-16 。 


表 8-16 ”Connection 的 不 同 对 象 




















名 称 命名 空间 描 述 
SqlConnection System. Data. SqlClient 表示 与 SQL Server 的 连接 对 象 
OleDbConnection System. Data. OleDb 表示 与 OleDb 数据 源 的 连接 对 象 
OdbcConnection System. Data. Odbc 表示 与 ODBC 数据 源 的 连接 对 象 
OracleConnection System. Data. OracleClient 表示 与 Oracle 数据 库 的 连接 对 象 


Connection 对 象 的 属性 如 下 。 
Database 或 Initial Catalog: 在 连接 打开 之 后 获取 当前 数据 库 的 名 称 , 或 者 在 连接 打开 
之 前 获取 连接 字符 串 中 指定 的 数据 库 名 。 
Server: 获取 要 连接 的 数据 库 服 务 器 的 名 称 。 
DataSource: 获取 要 连接 的 数据 库 服 务 器 实例 名 称 。 
Addr 或 Network Address: 获取 要 连接 的 数据 库 服 务 器 名 称 的 地 址 。 
ConnectionTimeOut: 获取 在 建立 连接 时 终止 尝试 并 生成 错误 之 前 所 等 待 的 时 间 ,默认 
值 为 15s。 
ConnectionString: 获取 或 设置 用 于 打开 连接 的 字符 串 。 
State: 获取 描述 连接 状态 的 字符 串 , 取 值 为 ConnectionState 的 枚 举 值 , 见 表 8-17。 
表 8-17 ”ConnectionState 的 枚 举 值 
值 含义 
Closed 连接 处 于 关闭 状态 
Open 连接 处 于 打开 状态 
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续 表 
值 含 区 
Connecting 连接 对 象 正在 与 数据 源 连接 
Executing 连接 对 象 正在 执行 命令 
Fetching 连接 对 象 正在 检索 数据 
Broken 与 数据 源 的 连接 中 断 


连接 SQL Server 数据 库 ,支持 两 种 身份 验证 模式 , 即 Windows 身份 验证 模式 和 混合 模 
式 。Windows 身份 验证 是 默认 模式 (通常 称 为 集成 安全 ) ,因为 此 SQL Server 安全 模型 与 
Windows 紧密 集成 。 特 定 信任 的 Windows 用 户 和 组 账户 都 可 以 登录 SQL Server, 经 过 身 
份 验证 的 Windows 用 户 不 必 提 供 附加 的 凭据 。 混 合 模式 支持 由 Windows 和 SQL Server 
进行 身份 验证 ,用 户 名 和 密码 保留 在 SQL Server 内 。 使 用 Windows 身份 验证 时 ,用 户 已 登 
录 到 Windows, 无 须 另 外 登录 到 SQL Server。SqlConnection. ConnectionString 可 指定 
Windows 身份 验证 ,而 无 需 用 户 名 或 密码 ,如 ConnectionString 二 "Server 二 MSSQL1; 
Database= AdventureWorks; Integrated Security = true; " 或 ConnectionString =" Data 
Source= MSSQL1; Initial Catalog= AdventureWorks; Integrated Security=true;"。 

服务 器 声明 的 关键 词 可 以 用 Data Source、Server 和 Addr 等 。 其 中 ,MSSQL1 表示 数 
据 库 服务 器 名 ,如 果 是 默认 的 实例 ,可 以 使 用 IP 地 址 代替 ,如 10. 18. 47. 139。 如 果 是 本 地 
数据 库 ,可 以 使 用 localhost。 如 果 一 台数 据 库 服务 器 上 有 多 个 SQL Server, 则 使 用 “服务 器 
机 器 名 \SQL Server 实例 名 ”。 如 果 安 装 的 是 SQL Server Express 版 本 ,通常 用 “服务 器 机 
器 名 \SQLEXPRESS”。 

关键 词 Initial Catalog- 或 -Database 都 表示 数据 库 的 名 称 。 

Integrated Security- 或 -Trusted_Connection 表示 是 否 需 要 账号 和 密码 。 当 Integrated 
Security= false 时 ,将 在 连接 中 指定 用 户 ID 和 密码 。 当 Integrated Security 二 false 时 ,将 
使 用 当前 的 Windows 账户 凭据 进行 身份 验证 。 

如 果 必 须 使 用 混合 模式 身份 验证 , 则 必须 创建 SQL Server 登录 名 ,这 些 登 录 名 存储 在 
SQL Server 中 ,在 运行 时 提供 SQL Server 用 户 名 和 密码 。SQL Server 使 用 名 为 sa("system 
administrator" 的 缩写 ) 的 SQL Server 登录 名 进行 安装 ,如 connectionString 二 "Data Source 二 .; 
Initial Catalog=mydb; User ID= sa; Password= pack"。 

为 sa 登录 分 配 一 个 强 密码 ,并 且 不 要 在 应 用 程序 中 使 用 sa 登录 。sa 登录 名 会 映射 到 
sysadmin 固定 服务 器 角色 , 它 对 整个 服务 器 有 不 能 撤销 的 管理 凭据 。 如 果 攻 击 者 以 系统 管 
理 员 的 身份 获取 了 访问 权限 , 则 可 能 造成 的 危害 是 无 法 预计 的 。 默 认 情 况 下 , Windows 
BUILTIN\Administrators 组 (本 地 管理 员 组 ) 的 所 有 成 员 均 为 sysadmin 角色 的 成 员 ,但 可 
以 从 该 角色 中 移 除 这 些 成 员 。 

针对 不 同 的 数据 库 ,连接 字符 串 有 不 同 的 数据 库 驱 动 名 : 

如 果 是 Aceess 数据 库 ,providerName 王 "System. Data. OleDb"; 

如 果 是 Oracle 数据 库 , providerName 王 "System. Data. OracleClient" 或 者 providerName 一 
"Oracle. DataAccess. Client"; 
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如 果 是 SQL Server 数据 库 ,providerName 王 "System. Data. SqlClient"; 

如 果 是 MySQL 数据 库 ,可 以 用 万 能 的 驱动 providerName 一 "System. Data. Odbc" 。 

如 果 是 Excel 文件 ,针对 不 同 版 本 有 Microsoft. Jet OLEDB. 4. 0( 以 下 简称 Jet 引擎 ) 
和 Microsoft ACE. OLEDB. 12. 0( 以 下 简称 ACE 引擎 ) 。Jet 引擎 可 以 访问 Office 1997 
2003 的 Excel 文件 (后 缀 为 xls) ,不 能 访问 Office 2007 或 以 后 的 Excel 文件 (后 组 为 
xlsx) 。ACE 引擎 是 随 Office 2007 一 起 发 布 的 数据 库 连接 组 件 , 既 可 以 访问 Office 
2007 或 以 后 的 Excel 文 件 ( 后 缀 为 xlsx) ,也 可 以 访问 Office 1997 一 2003 的 Excel 文件 
(后 缀 为 xls) 。 

不 同 版 本 的 Excel 对 应 不 同 的 属性 值 : 对 于 Office 1997 一 2003 的 Excel 文件 (后 缀 为 
. xls 的 文件 ) ,参数 Extended Properties 二 Excel 8.0, 对 于 Office 2007 或 以 后 的 Excel 文 
件 ,参数 Extended Properties 二 Excel 12. 0。 

针对 Office 1997 一 2003 版 本 的 Excel( 后 组 为 . xls 的 文件 ) ,连接 字符 串 string connStr 一 
"Provider= Microsoft. Jet. OLEDB. 4. 0; Extended Properties = Excel 8. 0;” 十 ”Data 
Source 一" 十 Excel 文件 名 。 

针对 Office 2007 或 以 后 版 本 的 Excel( 后 级 为 . xlsx 的 文件 或 . xls 的 文件 ) ,连接 字符 串 
string strCon = "Provider= Microsoft. ACE. OLEDB. 12. 0; Extended Properties= 'Excel 
12.0;HDR 王 YES;IMEX 王 1'; Data Source 二 "十 Excel 文件 名 。 其 中 ,参数 HDR= Yes 表示 
Excel 的 第 一 行 是 标题 ,不 作为 数据 使 用 ,如 果 HDR== No, 则 表示 第 一 行 不 是 标题 ,作为 数据 
使 用 ,系统 默认 的 是 Yes。 

IMEX ( IMport EXport mode ) 有 3 种 设置 模式 : 

IMEX=0 表示 “导出 模式 ”,Excel 文档 只 能 用 于 * 写 人 ”数据 。 

IMEX 一 1 表示 “导入 模式 ”,Excel 文档 只 能 用 于 “ 读 取 ”数据 。 

IMEX= 王 2 表示 “链接 模式 ”,Excel 文档 可 同时 于 “ 读 取 ”与 “ 写 入 ”数据 。 

针对 连接 字符 串 比较 复杂 的 问题 ,可 以 使 用 VS 2013 的 控件 自动 生成 ,如 例 8-13 所 示 。 

【 例 8-13】 使 用 SqlDataSource 控件 自动 生成 Access 数据 库 的 连接 字符 串 。 

第 1 步 ,使 用 Access 数据 库 软 件 创建 一 个 student. accdb 文件 。 

第 2 步 ,打开 一 个 Web 窗 体 ,并 拖 放 一 个 SqlDataSource 控件 到 窗 体 上 ,如 图 8-16 所 示 
选择 配置 数据 源 。 

第 3 步 , 单 击 “ 添 加 连接 ”按钮 ,如 图 8-17 所 示 配 置 数据 库 , 输 入 用 户 名 和 密码 。 

第 4 步 ,选择 测试 成 功 后 , 单 击 “确定 ?按钮 ,得 到 连接 字符 串 : 

Provider = Microsoft. ACE. OLEDB. 12. 0;Data Source = "D:\ 教 材 编写 \ 第 8 章 ASP\student. accdb" ;Jet 

OLEDB:Database Password = 123456 

连接 字符 串 需要 经 常 使 用 ,为 了 安全 和 方便 ,可 以 保存 在 Web. config 中 的 connectionStrings 
节 中 : 

<?xml version= "1.0" encoding = "utf 一 8"?> 

<configuration> 


<connectionStrings> 
<add name = "ConnectionString" connectionString = "Provider = Microsoft. ACE. OLEDB.12. 


286 。 web 系统 与 技术 





0;Data Source= D:\ 教 材 编写 \ 第 8 章 ASP\student. accdb; Jet OLEDB:Database Password = 123456" 
providerName = "System. Data. OleDb" /> 

</connectionStrings > 
…( 其 他 配置 ) 


</configuration > 


























添加 连接 Lo les) 
源 和 /或 提供 程序 - 
玫 据 源 G); 
Microsoft Access 数据 库 文件 (DOLE DB) 更 改 (O.-。 
数据 库 文件 各 (D): 
DA 坝 桂 过 写 第 8 寞 ASP\student.accdb 六 号 划 。 
登录 到 数据 库 
用 产 S(W): Admin 
BD): e000r0 
加 保存 3(9) 
[Lassso ] | we | 





8-16 ”SqlDataSource 控件 的 数据 源 配置 图 8-17 数据 库 配置 


引用 命名 空间 System. Configuration 后 ,可 以 在 页 面 中 使 用 . NET 提供 的 
ConfigurationManager 类 获取 Web. conf 文件 中 的 连接 字符 串 : ConfigurationManager. 
ConnectionStrings[ "连接 字符 串 名 "]. ToString(); 

Connection 对 象 的 方法 如 下 。 

BeginTransaction: 开 始 记录 数据 库 事 务 日 志 。 

CreateCommand: 创建 和 返回 与 Connection 对 象 有 关 的 Command 对 象 。 

Open() 方 法 使 用 ConnectionString 指定 的 设置 打开 数据 库 连 接 。 

Dispose() 方 法 释放 由 Component 使 用 的 所 有 资源 。 

Close() 方 法 关闭 与 数据 库 的 连接 ,此 方法 是 关闭 任何 已 打开 连接 的 首选 方法 。Close() 方 
法 回 滚 挂 起 的 事务 ,将 连接 释放 到 连接 池 ,或 者 在 连接 池 被 禁用 的 情况 下 关闭 连接 。 

【 例 8-14】 连接 SQL Server 的 SqlConnection 对 象 。 

第 1 步 ,在 安装 好 的 SQL Server 数据 库 中 建立 数据 库 。 

第 2 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-15. aspx, 并 设置 Ex8-15. aspx 为 起 始 页 。 

【 例 8-15】 连接 Excel 的 OleDbConnection 对 象 。 

第 1 步 ,建立 一 个 Excel 文件 “图 书库 . xls”。 

第 2 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-16. aspx, 并 设置 Ex8-16. aspx 为 起 始 页 。 

第 3 步 ,在 Ex8-16.aspx 上 拖 放 一 个 GridView 控件 GridView1。 对 应 的 代码 如 下 : 
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<% @ Page Language = "C 井 "RutoEventWireup = "true" CodeFile = "Ex8 -- 16.aspx.cs" Inherits = 
"Ex8_16" %> 
<! DOCTYPE HTML > 
< HIML xmlns = "http://www. w3. org/1999/xHTML"> 
< head runat = "server"> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
</head> 
<body> 
<form id= "form 1" runat = "server"> 
<asp:GridView ID = "GridViewl" runat = "server"> 
</asp:GridView> 
</form > 
</body> 
</HTML> 


第 4 步 ,在 Ex8-16. aspx. cs 文件 中 添加 如 下 代码 : 


using System; 

using System. Collections. Generic; 
using System, Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 
using System. Data. OleDb; 

using System. Data; 


public partial class Ex8_16: System. Web. UI. Page 

{ 
protected void Page_Load(object sender, EventArgs e) 
{ 


// 连接 字符 串 
string xlstPath = Server.MapPath(" 图 书库 .xlsx"); // 绝 对 物理 路 径 
string xlsPath = Server.MapPath(" 图 书库 .xls"); // 绝 对 物理 路 径 


string connStrl = "Provider = Microsoft.Jet. OLEDB.4.0;Extended Properties= 
Excel 8.0;" + "Data Source=" + xlsPath; 

string connStr2 = "Provider = Microsoft.ACE.OLEDB. 12.0;Extended Properties = 'Excel 
12.0;HDR= YES;IMEX = 1';" + "Data Source=" + xlstPath ; 


// 查询 语句 
string sql = "SELECT x* FROM [Sheet1 $ ]"; 
DataSet ds = new DataSet(); 


OleDbDataAdapter da = new OleDbDataAdapter(sql,connStr2); 
// 或 0leDbDataAdapter da = new 0leDbDataAdapter(sql, connStr1); 
da. Fill(ds); // 填充 DataSet 
// 输 出 , 绑 定数 据 
GridView1.DataSource = ds.Tables[0]; 
GridView1.DataBind(); } 
} 


第 5 步 ,运行 程序 ,得 到 如 图 8-18 所 示 的 结果 。 
8.4.2 ” Command 对 象 
ADO. NET 提供 了 两 个 连接 对 象 的 类 :一 个 是 DataAdapter 对 象 填充 Datatable, 或 填 
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8-18 程序 运行 结果 


充 DataSet, 如 例 8-15 所 示 ; 另 一 个 是 Command 对 象 。 当 成 功 与 数据 建立 连接 后 ,就 可 以 
用 Command 对 象 来 执行 查询 ,修改 、 插 入 、 删 除 等 命令 。Command 对 象 的 主要 属性 和 主要 
方法 分 别 见 表 8-18 和 表 8-19。 

表 8-18 Command 对 象 的 主要 属性 


属 性 含 党 
Connection 指定 Command 对 象 使 用 的 Connection 对 象 
指定 Command 对 象 的 类 型 ,有 3 种 选择 : 
Q@ Text: 表示 Command 对 象 用 于 执行 SQL 语句 ; 
CommandType @ StoredProcedure: 表示 Command 对 象 用 于 执行 存储 过 程 ; 
@ TableDirect: 表示 Command 对 象 用 于 直接 处 理 某 个 表 ; 
CommandType 属性 的 默认 值 为 Text 
根据 CommandType 属性 的 取 值 决定 CommandText 属性 的 取 值 ,分 为 3 种 情况 ， 
@ 如 果 为 Text, 则 CommandText 属性 指出 SQL 语句 的 内 容 ; 
CommandText @ 如 果 为 StoredProcedure, 则 CommandText 属性 指出 存储 过 程 的 名 称 ; 
@ 如 果 为 TableDirect, 则 CommandText 属性 指出 表 的 名 称 ; 
CommandText 属性 的 默认 值 为 SQL 语句 
指定 Command 对 象 用 于 执行 命令 的 最 长 延迟 时 间 , 以 秒 为 单位 ,如 果 在 指定 时 
间 内 仍 不 能 开始 执行 命令 , 则 返回 失败 信息 ,默认 值 为 30s 
Parameters 指定 一 个 参数 集合 














CommandTimeout 





表 8-19 Command 对 象 的 主要 方法 


属 性 含 义 
ExecuteReader 执行 查询 操作 ,返回 一 个 具有 多 行 多 列 的 结果 集 
执行 查询 操作 ,返回 第 1 条 的 第 一 个 值 。 这 个 方法 通常 用 来 执行 那些 用 到 count() 
或 者 sum 的 命令 
ExecuteNonQuery | 执行 插入 、 修 改 或 删除 操作 ,返回 本 次 操作 受 影响 的 行 数 








ExecuteScalar 








使 用 Command 对 象 ,必须 有 一 个 可 用 的 Connection 对 象 。 使 用 Command 对 象 的 步 
又 包括 : 

第 1 步 ,创建 数据 库 连接 ,创建 一 个 Connection 对 象 。 

第 2 步 ,定义 执行 的 SQL 语句 。 一 般 情况 下 ,会 将 要 执行 的 SQL 语句 赋值 给 一 个 字 
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符 串 。 

第 3 步 ,创建 Command 对 象 ,使 用 已 有 的 Connection 对 象 和 SQL 请 句 字符 串 创建 一 
个 Command 对 象 。 

第 4 步 ,执行 SQL 语句 ,使 用 Command 对 象 的 某 个 方法 执行 命令 。 

针对 不 同 数据 库 , 有 不 同 的 命令 对 象 。OleDbCommand 类 可 用 于 OLE DB 程序 提供 的 
数据 源 ,SqlCommand 类 用 于 SQL Server 7. 0 或 更 高 版 本 ,OdbcCommand 类 用 于 ODBC 数 
据 源 ,OracleCommand 类 用 于 Oracle 数据 库 ,具体 名 称 和 命名 空间 见 表 8-20。 


表 8-20 ”Command 的 不 同 对 象 




















名 称 命名 空 描 述 
SqlCommand System. Data. SqlClient 表示 与 SQL Server 的 命令 对 象 
OleDbCommand System. Data. OleDb 表示 与 OleDb 数据 源 的 命令 对 象 
OdbcCommand System. Data. Odbc 表示 与 ODBC 数据 源 的 命令 对 象 
OracleCommand System. Data. OracleClient 表示 与 Oracle 数据 库 的 命令 对 象 


【 例 8-16】 访问 Access 数据 库 的 OleDbCommand 对 象 。 

第 1 步 , 用 Access 创建 student. accdb 数据 库 文件 ,创建 BasicInfor 表 , 并 输入 4 条 
记录 。 

第 2 步 ,在 Web. conf 文件 中 添加 连接 connectionStrings 项 。 


< connectionStrings > 

< add name = " accessConstr” connectionString = " Provider = Microsoft. ACE. OLEDB. 12. 0; Data 
Source=D:\ 教 材 编写 \ 第 8 章 ASP\AspWebsite\ student. accdb;" providerName = " System. Data. 
OleDb" /> 

</connectionStrings > 


第 3 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-17. aspx, 并 设置 Ex8-17. aspx 为 起 始 页 。 
第 4 步 ,Ex8-17. aspx. cs 文件 中 添加 如 下 代码 : 


using System; 
using System. Collections. Generic; 
using System. Ling; 
using System. Web; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
using System. Data. OleDb; 
using System. Conf iguration; 
public partial class EX8_17: System. Web. UI. Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
OleDbConnection mycon = new OleDbConnection(); 
OleDbCommand mycom = new OleDbCommand(); 
mycon. ConnectionString = ConfigurationManager. ConnectionStrings[ "accessConstr"]. 
ToString( ); 
mycon. Open( ); 
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mycom. CommandText = "select count( * ) from BasicInfor"; 
mycom. Connection = mycon; 
Response. Write(mycom. ExecuteScalar( ) ); 


mycon. Close( ); 


. 
第 5 步 ,运行 程序 ,输出 结果 : 


4 


8.4.3 DataReader 对 象 


DataReader 对 象 以 * 基 于 连接 ”的 方式 访问 数据 库 。 也 就 是 说 ,在 访问 数据 库 、 执 行 
SQL 操作 时 ,DataReader 要 求 一 直 连 在 数据 库 上 。DataReader 将 结果 的 一 小 部 分 先 放 在 
内 存 中 , 读 完 后 再 从 数据 库 中 读 取 一 部 分 ,相当 于 一 个 缓存 机 制 。 这 对 于 查询 结果 百 万 级 的 
情况 来 说 , 带 来 的 好 处 是 显而易见 的 。DataReader 对 象 只 能 对 查询 获得 的 数据 集 进 行 自 上 
而 下 的 访问 ,但 效率 很 高 。 

DataReader 对 象 的 特点 是 只 能 读 入 数据 ,不 能 处 理 数据 ,只 能 显示 数据 ,所 以 开销 相对 
较 小 ,速度 比 DataSet 快 。DataReader 对 象 必须 显 式 地 打开 和 关闭 连接 ,而 DataAdapter 对 
象 可 以 自动 地 打开 和 关闭 连接 。DataReader 对 象 使 用 的 服务 器 资源 较 少 。 

1. DataReader 的 常用 属性 

FieldCount 属性 : 表示 由 DataReader 得 到 的 一 行 数据 中 的 字段 数 。 

HasRows 属性 : 表示 DataReader 是 否 包 含 数据 。 

IsClosed 属性 : 表示 DataReader 对 象 是 否 关闭 。 

2. DataReader 的 常用 方法 

DataReader 对 象 使 用 指针 的 方式 管理 所 连接 的 结果 集 , 它 的 常用 方法 有 关闭 方法 \ 读 
取 记 录 集 中 的 下 一 条 记录 和 读 取 下 一 个 记录 集 的 方法 . 读 取 记录 集中 字段 和 记录 的 方法 ,以 
及 判断 记录 集 是 否 为 空 的 方法 。 

DataReader. Close( ) 方 法 ,不 带 参 数 ,无 返回 值 ,用 来 关闭 DataReader 对 象 。 由 于 
DataReader 在 执行 SQL 命令 时 一 直 要 保持 同 数据 库 的 连接 ,所 以 在 DataReader 对 象 开启 
的 状态 下 ,该 对 象 对 应 的 Connection 连接 对 象 不 能 用 来 执行 其 他 操作 。 所 以 ,在 使 用 完 
DataReader 对 象 时 ,一定 要 使 用 Close() 方 法 关闭 该 DataReader 对 象 ,否则 不 仅 会 影响 到 
数据 库 连接 的 效率 ,更 会 阻止 其 他 对 象 使 用 Connection 连接 对 象 访问 数据 库 。 

DataReader. Read() 方 法 ,让 记录 指针 指向 本 结果 集中 的 下 一 条 记录 ,返回 值 是 True 
或 False。 当 Command 的 ExecuteReader 方法 返回 DataReader 对 象 后 , 须 用 Read 方法 来 
获得 第 一 条 记录 ; 当 读 完 一 条 记录 , 想 获得 下 一 条 记录 时 ,也 可 以 用 Read 方法 。 如 果 当 前 
记录 已 经 是 最 后 一 条 ,调用 Read 方法 将 返回 False。 也 就 是 说 ,只 要 该 方法 返回 True, 则 可 
以 访问 当前 记录 包含 的 字段 。 

DataReader. NextResult() 方 法 ,让 记录 指针 指向 下 一 个 结果 集 。 当 调用 该 方法 获得 下 
一 个 结果 集 后 ,依然 要 用 Read 方法 开始 访问 该 结果 集 。 

ObjectDataReader. GetValue(int i) 方 法 ,根据 传人 的 列 的 索引 值 , 返 回 当前 记录 行 里 指定 
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列 的 值 。 由 于 事先 无 法 预知 返回 列 的 数据 类 型 ,所 以 该 方法 使 用 Object 类 型 来 接收 返回 数据 。 

intDataReader. GetValues (Object[ ] values) 方 法 ,把 当前 记录 行 里 所 有 的 数据 保存 到 
一 个 数组 里 并 返回 。 可 以 使 用 FieldCount 属性 来 获知 记录 里 字段 的 总 数 , 据 此 定义 接收 返 
回 值 的 数组 长 度 。 

获得 指定 字段 的 方法 有 GetString、GetChar、GetInt32 等 ,这 些 方法 都 带 有 一 个 表示 列 
索引 的 参数 ,返回 均 是 Object 类 型 。 用 户 可 以 根据 字段 的 类 型 ,通过 输入 列 索引 ,分 别 调用 
上 述 方法 ,获得 指定 列 的 值 。 例 如 ,在 数据 库 里 ,id 的 列 索引 是 0, 通 过 string id = 
GetString (0) ;代码 可 以 获得 id 的 值 。 

DataReader. GetDataTypeName() 方 法 可 以 返回 列 的 数据 类 型 和 列 名 ,通过 输入 列 索 
引 , 获 得 该 列 的 类 型 。 这 个 方法 的 定义 是 : 


string DataReader. GetDataTypeName( int i) 


DataReader. GetName() 方 法 ,通过 输入 列 索引 ,获得 该 列 的 名 称 。 这 个 方法 的 定义 是 : 
string DataReader. GetName(int i) 。 

综合 使 用 上 述 两 种 方法 ,可 以 获得 数据 表 里 的 列 名 和 列 的 字段 。 

boolDataReader. IsDBNull(int i) 方 法 ,判断 指定 索引 号 的 列 的 值 是 否 为 空 , 返 回 True 
或 False。 

针对 不 同 数据 库 , 有 不 同 的 DataReader 对 象 。OleDbDataReader 类 用 于 任何 OLE DB 
提供 程序 , SqlDataReader 类 用 于 SQL Server 7. 0 或 更 高 版 本 ,OdbcDataReader 类 用 于 
ODBC 数据 源 ,OracleDataReader 类 用 于 Oracle 数据 库 , 具 体 名 称 和 命名 空间 见 表 8-21 。 


表 8-21 不 同 的 DataReader 对 象 























名 称 命名 空间 描 述 
SqlDataReader System. Data. SqlClient 表示 与 SQL Server 的 DataReader 对 象 
OleDbDataReader System. Data. OleDb 表示 与 OleDb 数据 源 的 DataReader 对 象 
OdbcDataReader System. Data. Odbc 表示 与 ODBC 数据 源 的 DataReader 对 象 
OracleDataReader System. Data. OracleClient 表示 与 Orcale 数据 库 的 DataReader 对 象 


【 例 8-17】 访问 Access 数据 库 的 OleDbDataReader 对 象 。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-18. aspx, 并 设置 Ex8-18. aspx 为 起 始 页 。 

第 2 步 ,数据 库 和 连接 字符 串 同 例 8-16 的 第 1 步 和 第 2 步 。 

第 3 步 , 在 Ex8-18. aspx. cs 文件 中 添加 如 下 代码 : 


using System; 

using System. Collections. Generic; 

using System. Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Data. OleDb; 

using System. Configuration; 

public partial class EX8_ 18: System. Web. UI. Page 
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protected void Page Load(object sender, EventArgs e) 
{ 
OleDbConnection mycon = new OleDbConnection(); 
OleDbCommand mycom = new OleDbCommand( ) ; 
mycon. ConnectionString = ConfigurationManager. ConnectionStrings[ "accessConstr"]. 
ToString(); 
mycon. Open( ); 
mycom. CommandText = "select * from BasicInfor"; 
mycom. Connection = mycon; 
OleDbDataReader myreader = mycom. ExecuteReader(); 
int n= myreader. FieldCount; 
while (myreader. Read( )) 
{ 
for(int i=0;i<n;it++) 
{ 
Response. Write(myreader. GetName(i).ToString() + ": "); 
Response. Write(myreader. GetValue(i).ToString() + "; "); 
Response. Write( "</br >"); 
} 
myreader. Close( ); 
mycon. Close( ); 


} 
第 4 步 ,运行 程序 ,得 到 如 图 8-19 所 示 的 结果 。 





93121; 姓名 : 张 三 ; 身份 证 : 112323123131; 
93122: 姓名 : 李 四 : 身份 证 : 223333432434; 
93123; 姓名 : 王 五; 身份 证 : 324234324324; 
93124; 姓名 : 阿 庆 媳 ; 身份 证 : 123243243244; 


日 日 日 日 
大 Dm 
答 帐 己 收 
ur 


8.4.4 DataSet 对 象 


DataSet 对 象 可 以 用 来 存储 从 数据 库 查 询 到 的 数据 结果 ,由 于 它 在 获得 数据 或 更 新 数 
据 后 立即 与 数据 库 断 开 ,所 以 程序 员 能 用 此 高 效 地 访问 和 操作 数据 库 。 并 且 , 由 于 DataSet 
对 象 具有 离线 访问 数据 库 的 特性 ,所 以 它 更 能 用 来 接收 海量 的 数据 信息 。 

DataSet 是 ADO. NET 中 用 来 访问 数据 库 的 对 象 。 由 于 其 在 访问 数据 库 前 不 知道 数据 
库 里 表 的 结构 ,所 以 在 其 内 部 ,用 动态 XML 的 格式 来 存放 数据 。 这 种 设计 使 DataSet 能 访 
问 不 同 数据 源 的 数据 。 

DataSet 对 象 本 身 不 同 数据 库 发 生 关系 ,而 是 通过 DataAdapter 对 象 从 数据 库 里 获取 数 
据 , 并 把 修改 后 的 数据 更 新 到 数据 库 。 在 同 数据 库 建立 连接 后 ,程序 员 可 以 通过 
DataApater 对 象 填充 (Fill) 或 更 新 (Update)DataSet 对 象 。 
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.NET 的 这 种 设计 ,很 好 地 符合 了 面向 对 象 思想 低 耦 合 、 对 象 功能 唯一 的 优势 。 如 果 让 
DataSet 对 象 能 直接 连 到 数据 库 ,那么 DataSet 对 象 的 设计 势必 只 能 针对 特定 数据 库 ,通用 
性 就 非常 差 , 这 样 对 DataSet 的 动态 扩展 非常 不 利 。 由 于 DataSet 独立 于 数据 源 , 所 以 
DataSet 可 以 包含 应 用 程序 本 地 的 数据 ,也 可 以 包含 来 自 多 个 数据 源 的 数据 。DataSet 与 现 
有 数据 源 的 交互 通过 DataAdapter 来 控制 。 

1. DataSet 对 象 的 常用 属性 

DataSet 对 象 的 常用 属性 见 表 8-22 所 示 。 


表 8-22 ”DataSet 对 象 的 常用 属性 























属 性 说 明 
CaseSentive DataTable 中 的 字符 串 进行 比较 时 是 否 区 分 大 小 写 
DataSetName 返回 DataSet 的 名 称 
Tables 数据 集中 包含 的 数据 表 的 集合 
Ralations 数据 集中 包含 的 数据 联系 的 集合 
DataSetName 用 于 获取 或 设置 当前 数据 集 的 名 称 
HasErrors 用 于 判断 当前 数据 集中 是 否 存在 错误 


2. DataSet 对 象 的 常用 方法 
DataSet 对 象 的 常用 方法 见 表 8-23 。 


表 8-23 ”DataSet 对 象 的 常用 方法 























方 法 说 明 
Clear 清除 数据 集 包 含 的 所 有 表 中 的 数据 ,但 不 清除 表 结构 
Reset 清除 数据 集 包 含 的 所 有 表 中 的 数据 ,而 且 清除 表 结构 
HasChanges 判断 当前 数据 集 是 否 发 生 了 更 改 ,更 改 的 内 容 包 括 添加 行 、 修 改行 或 删除 行 
AcceptChange 提交 所 有 对 Dataset 的 修改 
RejectChanges 撤销 数据 集中 所 有 的 更 改 
Clone 生成 与 当前 DataSet 相同 的 但 不 包含 数据 的 DataSet 
Copy 生成 与 当前 DataSet 相同 的 但 包含 数据 的 DataSet 





【 例 8-18〗 使 用 Dataset 对 象 ,创建 表 、 添 加 记录 和 显示 数据 。 
第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 


选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-19. aspx, 并 设置 Ex8-19. aspx 为 起 始 页 。 


第 2 步 ,在 Ex8-19. aspx 页面 添加 一 个 GridView 控件 GridView]1。 
第 3 步 , 在 Ex8-19. aspx. cs 文件 中 添加 引用 “using System. Data;” 和 如 下 代码 。 


using System; 

using System. Collections. Generic; 

using System. Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Data; 

public partial class Ex8_19: System. Web. UI. Page 


Web 系统 与 技术 





protected void Page Load(object sender, EventArgs e) 
{ 
DataSet ds = new DataSet(); 
DataTable tb = new DataTable(); 
// 定 义 表 头 字段 
tb. Columns. Add( "ID", System. Type. GetTYpe("System. String")); 
tb. Columns. Add( "StudentName", System. Type. GetTYpe("System. String" ) ) ; 
tb. Columns. hdd("ID - No" ,System.TYpe. GetTYpe("System. String" )); 
ds. Tables. Add( tb); 
ds.Tables[0].PrimaryKey = new DataColumn[] { ds.Tables[0].Columns["ID"]}; 
// 添 加 数据 记录 
DataRow dr = tb.NewRow(); 


tb. Rows. Add( dr); 


this. GridView1.DataSource = ds; 
this. GridViewl. DataBind( ); 


. 
第 4 步 ,运行 程序 ,得 到 如 图 8-20 所 示 的 运行 结果 。 








D lStudentName| ID-No 
093171 加 51122319999090| 

















8-20 ”程序 运行 结果 


8.4.5 DataAdapter 对 象 


DataAdapter 对 象 主要 用 来 承接 Connection 和 DataSet 对 象 。DataSet 对 象 只 关心 访 
问 操作 数据 ,而 不 关心 自身 包含 的 数据 信息 来 自 哪个 Connection 连接 到 的 数据 源 , 而 
Connection 对 象 只 负责 数据 库 连接 ,而 不 关心 结果 集 的 表示 。 所 以 ,在 ASP. NET 的 架构 
中 使 用 DataAdapter 对 象 来 连接 Connection 和 DataSet 对 象 。 另 外 ,DataAdapter 对 象 能 
根据 数据 库 里 的 表 的 字段 结构 ,动态 地 塑造 DataSet 对 象 的 数据 结构 。 

1. DataAdapter 对 象 的 常用 属性 

DataAdapter 对 象 的 工作 步骤 一 般 有 两 种 :一 种 是 通过 Command 对 象 执行 SQL 语句 ， 
将 获得 的 结果 集 填 充 到 DataSet 对 象 中 。 另 一 种 是 将 DataSet 里 更 新 数据 的 结果 返回 到 数 
据 库 中 。 使 用 DataAdapter 对 象 ,可 以 读 取 、 添 加 、 更 新 和 删除 数据 源 中 的 记录 。 对 于 每 种 
操作 的 执行 方式 ,适配器 支持 以 下 4 个 属性 ,类 型 都 是 Command, 分 别 用 来 管理 数据 操作 的 
“增删 …“ 改 ”“ 查 ”动作 。 

SelectCommand 属性 : 用 来 从 数据 库 中 检索 数据 。InsertCommand 属性 : 用 来 向 数据 
库 中 插入 数据 。DeleteCommand 属性 : 用 来 删除 数据 库 里 的 数据 。UpdateCommand 属 





第 8 章 Asp 编程 295 





性 : 用 来 更 新 数据 库 里 的 数据 。 

2. DataAdapter 对 象 的 常用 方法 

DataAdapter 对 象 主要 用 来 把 数据 源 的 数据 填充 到 DataSet 中 ,以 及 把 DataSet 里 的 数 
据 更 新 到 数据 库 ,同样 有 SqlDataAdapter 和 OleDbAdapter 两 种 对 象 。 

它 的 常用 方法 有 构造 函数 类 方法 、Fill 类 方法 和 Update 类 方法 。 

(1) 构造 函数 类 方法 。 不 同类 型 的 Provider 使 用 不 同 的 构造 函数 来 完成 DataAdapter 
对 象 的 构造 。 以 SqlDataAdapter 类 为 例 , 其 构造 函数 说 明 见 表 8-24, 其 他 DataAdapter 类 
都 有 类 似 的 函数 和 方法 。 

表 8-24 SqlDataAdapter 的 3 种 构造 方法 
构造 方法 说 上 明 
SqlDataAdapter() 创建 SqlDataAdapter 对 象 








指定 新 创建 对 象 的 SelectCommand 属性 创建 
SqlDataAdapter(SqlCommand selectCommand) | SqlDataAdapter 对 象 。 用 参数 selectCommand 设置 其 
Select Command 属性 





selectCommandText : 指定 新 创建 对 象 的 SelectCommand 属 
性 值 ; 
selectConnection: 指定 连接 对 象 创建 SqlDataAdapter 对 象 


SqlDataAdapter( string selectCommandText, 
SqlConnection selectConnection) 





selectCommandText: 指定 新 创建 对 象 的 SelectCommand 
SqlDataAdapter(string selectCommandText，| 属性 值 ; 

String selectConnectionString) selectConnectionString: 指定 新 创建 对 象 的 连接 字符 串 
创建 SqlDataAdapter 对 象 





(2) Fill 类 方法 。 当 调用 Fill 方法 时 , 它 将 向 数据 存储 区 传输 一 条 SQL SELECT 请 
句 。 该 方法 主要 用 来 填充 或 刷新 DataSet ,返回 值 影 响 DataSet 的 行 数 。Fill 类 方法 的 常用 
定义 见 表 8-25。 


表 8-25 ”Fill 类 方法 的 常用 定义 


函数 定义 说 明 


dataset: 需要 更 新 的 DataSet。 根 据 匹 配 的 数据 源 , 添 加 或 更 新 参数 
指定 的 DataSet, 返 回 值 是 影响 的 行 数 

int Fill (DataSet dataset, string | dataset: 需要 更 新 的 DataSet。srcTable: 填充 DataSet 的 dataTable 
srcTable) 名 ,根据 dataTable 名 填充 DataSet 

添加 或 刷新 SelectCommand 指定 查询 范围 中 的 所 有 行 ,并 填充 到 
DataTable, 如 果 它 们 尚 不 存在 , 则 创建 DataTable 对 象 

添加 或 刷新 SelectCommand 指定 查询 范围 中 从 指定 的 记录 开始 到 指 
定 的 最 大 记录 数 的 行 , 并 填充 到 DataTable 中 





int Fill(DataSet dataset) 








Fill(DataTable) 





Fill(Int32, Int32, DataTable[ ]) 





(3) Update 类 方法 。 当 程序 调用 Update 方法 时 ,DataAdapter 将 检查 参数 DataSet 每 
一 行 的 RowState 属性 ,根据 RowState 属性 来 检查 DataSet 里 的 每 行 是 否 改变 和 改变 的 类 
型 ,并 依次 执行 所 需 的 INSERT、UPDATE 或 DELETE 语句 ,将 改变 提交 到 数据 库 中 。 
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int Update(DataSet dataSet) 方 法 


这 个 方法 返回 影响 DataSet 的 行 数 。 更 准确 地 说 , Update 方法 会 将 更 改 解析 回 数据 
源 , 但 自 上 次 填充 DataSet 以 来 ,其 他 客户 端 可 能 已 修改 了 数据 源 中 的 数据 。 若 要 使 用 当前 
数据 刷新 DataSet, 应 使 用 DataAdapter 和 Fill 方 法。 

新 行将 添加 到 该 表 中 ,更 新 的 信息 将 并 人 现 有 行 。Fill 方法 通过 检查 DataSet 中 行 的 主 
键 值 及 SelectCommand 返回 的 行 来 确定 是 要 添加 一 个 新 行 ,还 是 更 新 现 有 行 。 

如 果 Fill 方法 发 现 DataSet 中 某 行 的 主键 值 与 SelectCommand 返回 结果 中 某 行 的 主键 
值 相 匹配 , 则 它 将 用 SelectCommand 返回 的 行 中 的 信息 更 新 现 有 行 , 并 将 现 有 行 的 
RowState 设置 为 Unchanged。 

如 果 SelectCommand 返回 的 行 具有 的 主键 值 与 DataSet 中 行 的 任何 主键 值 都 不 匹配 ， 
则 Fill 方法 将 添加 RowState 为 Unchanged 的 新 行 。 

DataSet 对 象 常 和 DataAdapter 对 象 配合 使 用 。 通 过 DataAdapter 对 象 ,向 DataSet 中 
填充 数据 的 一 般 过 程 是 : 

步骤 1, 创 建 DataAdapter 和 DataSet 对 象 。 

步骤 2, 使 用 DataAdapter 对 象 ,为 DataSet 产生 一 个 或 多 个 DataTable 对 象 。 

步骤 3,DataAdapter 对 象 将 从 数据 源 中 取出 的 数据 填充 到 DataTable 中 的 DataRow 
对 象 里 ,然后 将 该 DataRow 对 象 妃 加 到 DataTable 对 象 的 Rows 集合 中 。 

步骤 4, 重 复 步骤 2, 直 到 数据 源 中 所 有 数据 都 已 填充 到 DataTable 里 。 

步骤 5, 将 步骤 2 产生 的 DataTable 对 象 加 入 DataSet 里 。 

使 用 DataAdapter 对 象 ,对 DataSet 填充 数据 如 例 8-19 所 示 。 

使 用 DataSet, 将 程序 里 修改 后 的 数据 更 新 到 数据 源 的 过 程 是 : 

步骤 1 ,创建 待 操作 DataSet 对 象 的 副本 ,以 免 因 误 操作 而 造成 数据 损坏 。 

步骤 2, 对 DataSet 的 数据 行 (如 DataTable 里 的 DataRow 对 象 ) 进 行 插入 、 删 除 或 更 改 
操作 ,此 时 的 操作 不 能 影响 到 数据 库 。 

步骤 3, 调 用 DataAdapter 的 Update 方法 ,把 DataSet 中 修改 的 数据 更 新 到 数据 源 中 。 

【 例 8-19】〗 使 用 DataAdapter 对 象 更 新 数据 。 

第 1 步 , 使 用 例 8-16 中 的 student. accdb 数据 库 文件 和 connectionStrings 字符 串 。 

第 2 步 , 创 建 一 张 新 的 表 Person ,添加 3 个 字段 : Sno( 数 字 , 主键 ) ,Sname( 短 文本 ) 
Sage( 数 字 ) 。 

第 3 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-20. aspx, 并 设置 Ex8-20. aspx 为 起 始 页 。 

第 4 步 ,在 Ex8-20. aspx. cs 文件 中 添加 如 下 代码 : 

using System; 

using System. Collections. Generic; 

using System. Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Data. OleDb; 


using System. Data; 
using System. Configuration; 
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public partial class Ex8_20: System. Web. UI. Page 
{ 
protected void Page Load(object sender, EventArgs e) 
{ 
OleDbConnection mycon = new OleDbConnection(); 
OleDbCommand mycom = new OleDbCommand(); 
mycon. ConnectionString = ConfigurationManager. ConnectionStrings["accessConstr"]. 
ToString(); 
mycon. Open( ); 
mycom. CommandText = "select * from Person"; 
mycom. Connection = mycon; 
DataTable dt = new DataTable(); 
OleDbDataAdapter sda = new OleDbDataAdapter(mycom); 
sda. Fill(dt); 
for (int i = 1; i<= 10; i++) 
dt. Rows. Rdd(new object[] { i,"aaa" + i,20 + i}); 
OleDbCommandBuilder scb = new OleDbCommandBuilder(sda); 


// 执 行 更 新 
sda. Update( dt. GetChanges( ) ); 
// 使 DataTable 保存 更 新 
dt. AcceptChanges(); 
第 5 步 ,运行 程序 ,查看 Access 数据 库 , 得 到 如 图 8-21 所 示 的 运行 结果 。 
悦 Person\\ 
SNo -| SNaae -| Shge -| 
1maal 21 
2 aaa2 22 
3 aaa3 23 
生 aaa 和 4 24 
5aaa5 25 
| 6 aaa6 26 
| 7 aaa7 27 
8 aaa8 28 
9 aaa9 29 
10 aaal0 30 
* 0 0 


8-21 程序 运行 结果 


8.4.6 Transaction 对 象 


事务 作为 一 个 单元 被 提交 和 回 滚 , 可 以 与 SQL 语句 组 合 使 用 。 通 过 ADO. NET 事务 ， 
可 以 将 多 个 任务 绑 定 在 一 起 ,如 果 所 有 任务 都 成 功 ,就 提交 事务 ,如 果 有 一 个 任务 失败 ,就 滚 
回 事务 。ADO. NET 事务 通过 该 Transaction 类 实现 ,每 个 . NET Framework 数据 提供 程 
序 都 有 自己 的 Transaction 类 执行 事务 。 通 过 设置 Command 对 象 的 事务 属性 Transaction 
与 Transaction 对 象 绑 定 来 实现 事务 处 理 。 例 如 ,对 于 银行 事务 ,可 以 从 一 个 账号 取 钱 , 存 
到 另 一 个 账号 中 ,然后 在 一 个 单元 中 提交 这 些 改变 ,如 果 发 生 问题 , 则 同时 回 滚 这 些 改变 。 

1. Transaction 对 象 的 主要 属性 

Connection 属性 , 指 同事 务 处 理 相关 联 的 连接 对 象 。 

IsolationLevel 属性 ,定义 事务 处 理 的 锁定 记录 级 别 。 

2. Transaction 对 象 的 主要 方法 

Commit() 方 法 ,提交 数据 库 事务 。 
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Rollback() 方 法 ,从 未 决 状态 回 滚 事务 处 理 。 如 果 事 务 提交 成 功 , 则 不 能 执行 此 操作 。 

以 SQLTransaction 对 象 为 例 ,事务 在 SQL Server 数据 库 中 执行 , 则 需要 引入 System. 
Data. Sqlclient 命名 空间 。 执 行 ADO. NET 事务 包含 4 个 步骤 。 

第 1 步 , 调 用 SqlConnection 对 象 的 BeginTransaction() 方 法 ,创建 一 个 SqlTransaction 
对 象 ,用 于 标记 事务 开始 。 

第 2 步 ,将 创建 的 SqlTransaction 对 象 分 配给 要 执行 的 SqlCommand 的 Transaction 属性 。 

第 3 步 ,调用 对 应 的 方法 执行 SQLCommand 命令 。 

第 4 步 , 调 用 SqlTransaction 的 Commit() 方 法 完成 事务 ,或 者 调用 Rollback() 方 法 终 
止 事务 。 

【 例 8-20】 使 用 Transaction 对 象 ,提交 事务 处 理 。 

第 1 步 , 使 用 例 8-16 的 student. accdb 数据 库 文件 和 connectionStrings 字符 串 。 

第 2 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-21. aspx, 并 设置 Ex8-21. aspx 为 起 始 页 。 

第 3 步 ,在 EEx8-21. aspx. cs 中 添加 如 下 代码 。 


using System; 

using System. Collections. Generic; 

using System. Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Data; 

using System. Data. OleDb; 

using System. Conf iguration; 

public partial class Ex8_21: System. Web. UI. Page 

{ 

protected void Page_Load(object sender, EventArgs e) 

{ 

OleDbConnection mycon = new OleDbConnection(); 

mycon. ConnectionString = ConfigurationManager. ConnectionStrings[ "accessConstr"]. ToString 
(0); 

mycon. Open( ); 

OleDbTransaction tran = mycon.BeginTransaction(); 

OleDbCommand mycom = new OleDbCommand(); 

mycom. Connection = mycon; 

mycom. Transaction = tran; 

try 

{ 

mycom. CommandText = "update Person set SName = ' 楠 哥 ' where SNo=1"; 
mycom. ExecuteNonQuery( ); 

mycom. CommandText = "update Person set SName = ' 啊 华 ' where SNo=2"; 
mycom. ExecuteNonQuery( ) 7 

tran. Commit(); 

Response. Write("< script language = javascript > alert( ' 事 物 提 交 成 功 ')</script >"); 
} 

catch (Exception ex) 

{ 
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tran. Rollback( ); 


Response. Write("< script language = javascript > alert(' 失 败 '" + ex.ToString()+ ") 


</script >"); 


} 
} 
} 


第 4 步 ,运行 程序 ,查看 Access 数据 库 ,得 到 如 图 8-22 所 示 的 运行 结果 。 








习 Person 
sho - SNane - SAEE ~ 
图 1 杭 哥 21 
图 2 啊 华 22 
品 3 aaa3 23 
型 | 4 aaad 24 
四 | 5 aaa5 25 
剧 Baaab 26 
大 ?了 aaa7 27 
二 || 8 aaa8 28 
| 9 aaa9 29 
10 aaal0 30 





图 8-22 程序 运行 结果 


8.4.7 Parameter 对 和 象 


ADO. NET Parameter 对 象 代表 与 基于 参数 化 查询 或 存储 过 程 的 Command 对 象 相关 
联 的 参数 或 自 变量 。 参 数 化 查询 时 ,使 用 Parameter 对 象 还 有 利于 防止 注入 。Parameter 对 
象 在 其 被 创建 时 被 添加 到 Parameters 集合 。Parameters 集合 与 一 个 具体 的 Command 对 象 
相关 联 。Command 对 象 使 用 此 集合 在 存储 过 程 和 查询 内 外 传递 参数 。Parameter 对 象 的 


属性 见 表 8-26 。 


表 8-26 “Parameter 对 象 的 属性 
































属 性 含 党 

Attributes 设置 或 返回 一 个 Parameter 对 象 的 属性 

Dei 设置 或 返回 某 个 参数 如 何 传递 到 存储 过 程 或 从 存储 过 程 传递 回来 。 有 4 种 类 型 
的 参数 : input 参数 .output 参数 ,input/output 参数 以 及 return 参数 

Name 设置 或 返回 一 个 Parameter 对 象 的 名 称 

NumericScale 设置 或 返回 一 个 Parameter 对 象 的 数值 的 小 数 点 右 侧 的 数字 数目 

Precision 设置 或 返回 当 表 示 一 个 参数 中 数值 时 所 允许 数字 的 最 大 数目 

Size 获取 或 设置 列 中 数据 的 最 大 值 (以 字 节 为 单位 ) ,如 果 未 显 式 设置 Size, 则 从 实际 
参数 的 值 中 推断 出 该 值 

Type 设置 或 返回 一 个 Parameter 对 象 的 类 型 

Value 设置 或 返回 一 个 Parameter 对 象 的 值 

SqlDbType 指定 使 用 SqlType 的 参数 值 

SqlValue 指定 该 参数 的 值 





参数 化 命令 使 用 参数 在 命令 执行 前 改变 命令 的 某 些 细节 。 例 如 ,SQL SELECT 语句 可 
使 用 参数 定义 WHERE 子 句 的 匹配 条 件 ,而 使 用 另 一 个 参数 来 定义 SORT BY 子 句 的 列 的 
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名 称 。 
【 例 8-21】 基于 SQL Server 数据 库 , 使 用 Parameter 对 象 实现 参数 化 的 存储 过 程 
查询 。 
第 1 步 , 使 用 SQL Server 创建 student 数据库, 创建 一 
eed 张 BasicInfor 表 , 设 计 字 段 : IDCnchar(10)) ,StudentName 
(nchar(20)),Nolnchar(20)), 其 中 ID 设置 为 非 空 的 主键 。 
图 8-23 ”student 的 数据 记录 输入 2 条 记录 ,如 图 8-23 所 示 。 
第 2 步 ,使 用 SQL Server 数据 库 创建 一 个 存储 过 程 。 











create proc myProc 

@studentNamevarchar (20) 

as 

begin 

select No from BasicInfor where StudentName = @StudentName 
end 


go 
第 3 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-22. aspx, 并 设置 Ex8-22. aspx 为 起 始 页 。 
第 4 步 ,Ex8-22. aspx. cs 文件 中 添加 代码 : 


using System; 
using System. Collections. Generic; 
using System. Ling; 
using System. Web; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
using System. Data. SqlClient; 
using System. Data; 
public partial class EX8_22: System. Web. UI. Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
string connStr = @"Server = 10.18.47.139; Database = student; Integrated Security= 
True;"; 
// 建 立 连接 
SqlConnection conn = new SqlConnection(connStr); 
SqlCommand myCommand = new SqlCommand("myProc",conn); 
// 表 示 myCommand 执行 的 是 存储 过 程 
myCommand. CommandType = CommandType. StoredProcedure; 
// 设 置 存储 过 程 的 参数 值 ,其 中 @id 为 存储 过 程 的 参数 
SqlParameter StudentName = myCommand. Parameters. Rdd ( " @ StudentName", SqlDbType. 
NText); 
StudentName. Value =" 张 山 "; 
StudentName. Direction = ParameterDirection. Input; 
conn. Open( ); 
SqlDataReader myreader = myCommand. ExecuteReader(); 
int n = myreader.FieldCount; 
while (myreader. Read() ) 
{ 
for (int i = 0; i<n; i++) 
{ 
Response. Write(myreader. GetName(i).ToString() + ": "); 
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} 


Response. Write(myreader. GetValue(i).ToString() + "; "); 


Response. Write("</br >"); 


} 


myreader. Close( ); 
conn. Close( ); 


} 
} 


第 5 步 ,运行 程序 ,输出 结果 如 下 。 


No: 12124343 ; 


8.4.8 ASP. NET 的 数据 源 控件 对 象 


数据 绑 定 页 面 可 以 完成 两 类 任务 : 首先 ,从 数据 源 中 读 取 数据 并 为 关联 的 控件 提供 数 
据 。 其 次 ,在 关联 的 控件 编辑 数据 后 ,它们 可 以 更 新 数据 源 。 

ASP. NET 内 置 了 多 种 数据 源 控件 ,它们 可 以 帮助 开发 人 员 迅 速 开 发 出 复杂 的 数据 绑 
定 页 面 和 数据 操作 功能 。 数 据 源 控件 允许 开发 人 员 连 接 至 多 种 数据 库 、 数 据 文件 (XML 文 
件 ) ,并 提供 了 数据 检索 及 数据 操作 等 多 种 复杂 的 功能 。 数 据 源 控件 可 以 极 大 地 减轻 开发 人 
员 的 工作 量 ,使 他 们 可 以 不 编写 任何 代码 或 者 编写 很 少 的 代码 ,就 可 以 完成 页 面 数据 绑 定 和 
数据 操作 功能 。 常 见 的 数据 源 控件 见 表 8-27。 


数据 源 控件 


表 8-27 常见 的 数据 源 控件 
描 述 





SqlDataSource 


连接 SQL Server 数据 库 的 数据 源 控件 ,可 以 将 数据 读 取 至 DataSet 或 
SqlDataReader 对 象 中 ,并 提供 了 数据 排序 .筛选 和 分 页 功能 





EntityDataSource 


可 以 将 EntityDataSource 控件 与 数据 绑 定 控 件 一 起 使 用 ,以 从 EDM 检索 数据 ， 
以 及 不 使 用 代码 或 只 需 使 用 少量 代码 在 网 页 上 显示 、 编 辑 数据 以 及 对 其 进行 
排序 





LinqDataSource 


允许 开发 人 员 在 页 面前 台 内 垦 Lambda 表达 式 , 从 数据 对 象 中 读 取 式 操作 数据 ， 
并 且 可 以 帮助 开发 人 员 生 成 更 新 、 删 除 、 插 入 等 命令 





ObjectDataSource 


允许 开发 人 员 使 用 业务 层 或 其 他 中 间 层 管理 数据 ,并 支持 其 他 数据 源 控件 所 不 
支持 的 复杂 排序 和 筛选 功能 、 分 页 方案 





XmlDataSource 


允许 开发 人 员 使 用 XML 文档 作为 数据 源 ,可 以 使 用 Xpath 表达 式 完 成 数据 筛选 
功能 ,特别 适合 于 分 层 控件 ,如 TreeView 和 Menu 控件 配合 使 用 





SiteMapDataSource 





以 SiteMap 文件 作为 数据 源 的 数据 源 控件 ,可 以 迅速 完成 站 点 导航 功能 开发 的 
数据 源 控件 


1. SqlDataSource 数据 源 控件 

以 SqlDataSource 为 例 ,介绍 常见 数据 源 控件 的 使 用 。SqlDataSource 代表 一 个 使 用 
ADO. NET 提供 程序 的 数据 库 连 接 , 它 需要 一 个 通用 的 方法 创建 它 所 需要 的 Connection、 
Command、DataReader 对 象 。 使 其 唯一 可 行 的 办 法 是 有 一 个 数据 提供 程序 工厂 来 负责 创建 
这 些 对 象 。 创 建 完 数据 源 后 ,可 以 在 设计 时 绑 定 控件 ,而 不 必 在 Page. Load 事件 中 编写 


逻辑 。 


通过 设置 提供 程序 的 名 字 来 选择 数据 源 : 
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<asp:SqlDataSource ProviderName = "System. Data. SqlClient" = "SqlDataSourcel" runat = 
"server"> 


</asp:SqlDataSource> 


下 一 步 是 提供 连接 字符 串 , 应 从 Web. config 中 读 取 (使 用 表达 式 构造 器 的 方式 ) 。 
< asp: SqlDataSource ProviderName 
ConnectionStrings %>" 


" System. Data. SqlClient" ConnectionString ="<% $ 


ID = "SqlDataSourcel" runat = "server"> 
</asp:SqlDataSource> 


SqlDataSource 命令 逻辑 由 SelectCommand、InsertCommand、UpdateCommand、 
DeleteCommand 4 个 属性 提供 ,它们 都 接收 一 个 字符 串 (SQL 语句 或 存储 过 程 名 称 ); 与 之 相 


应 的 SelectCommandType .InsertCommandType 、UpdateCommandType 、DeleteCommandType 也 
要 设置 为 Text 或 StoredProcedure (Text 是 默认 值 )。 


【 例 8-22〗 基于 SqlDataSource 控件 的 ListBox 数据 绑 定 。 


第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-23. aspx, 并 设置 Ex8-23. aspx 为 起 始 页 。 

第 2 步 ,在 Ex8-23. aspx 页 面 添加 LisBox 控件 和 SqlDataSource 控件 。 

第 3 步 ,为 SqlDataSource 控件 配置 数据 ,添加 连接 如 图 8-24 所 示 。 

















数据 源 (S): 
Microsoft Access 数据 库 文件 (OLE DB) 更 改 (C… 
数控 库 文件 各 (D): 
Di 才 材 纺 富 生 8 这 ASPVAspwebsite\student 
EET 


用 户 名 :Admin 
密码 (P): 


加 保存 至 码 O) 




















图 8-24 SqlDataSource 控件 添加 连接 
第 4 步 ,为 连接 数据 选择 查询 语句 如 图 8-25 所 示 ,生成 如 图 8-26 所 示 的 连接 字符 串 。 
第 5 步 , 设 置 Listbox 的 DataSourceID .DataTextField .DataValueField 属性 ,如 图 8-27 
所 示 。 


第 6 步 , 运 行程 序 , 得 到 如 图 8-28 所 示 的 结果 。 
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Provider=MicrosoftACE OLEDB.12 QiData Source=-D: 咸 村 注 写 第 8 部 ASPWspwebsiteVstudertaccdb” “ 


8-25 连接 字符 串 




















SELECT 语句 (U: 
SELECT * FROM [Basicinfor] 





图 8-26 配置 Select 语句 




















ListBoxl System. Web.ULWebControls.ListBox 
BECEA 
AutopostBack False . 
BackColor 
CausesValidation Fake 
ClienttDMode Inherit | 
CssClass | 
DataMember | 
DataScurcelD sqlDatasourcel | 
DataTedField 学 号 | 
DataTextFormatString | 
姓名 加 
Tne | 
EnableTheming Tne 
EnableViewstate Tne 
加 Fent 
Forecolor 
Height 
Hems 俯 全 ) 
TtemType . 





8-27 ”ListBox 字段 属性 设置 图 8-28 程序 运行 结果 
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2. EntityDataSource 控件 

ADO. NET EntityDataSource 控件 在 使 用 ADO. NET Entity Framework 的 Web 应 用 
程序 中 支持 数据 绑 定 方案 。 该 控件 与 Entity Framework 一 样 ,从 SP1 开始 作为 . NET 
Framework 3.5 的 一 部 分 提供 。EntityDataSource 控件 的 编程 图 面 与 SqlDataSource、 
LinqDataSource .XmlDataSource 和 ObjectDataSource 控件 的 编程 图 面 类 似 。 

与 其 他 Web 服务 器 数据 源 控件 一 样 ,EntityDataSource 控件 也 代表 同一 页 上 的 数据 绑 
定 控件 管理 对 数据 源 的 创建 、 读 取 、 更 新 和 删除 操作 。EntityDataSource 可 用 于 可 编辑 的 网 
格 、 具 有 用 户 控制 的 排序 和 筛选 功能 的 窗 体 、 双 重 绑 定 的 下 拉 列 表 控 件 以 及 主 一 详细 信 
息 页 。 

使 用 EntityDataSource 控件 ,可 以 将 页 面 上 的 Web 控件 绑 定 到 实体 数据 模型 (EDM) 
中 的 数据 。 与 ObjectQuery < 了 > 的 查询 生成 器 方法 一 样 ,查询 是 使 用 分 配给 Where()、 
OrderBy() 、GroupBy() 和 Select() 属 性 的 实体 SQL 语法 的 片段 构造 的 。 可 以 将 页 控件 、 
Cookie .追加 到 页 URI 的 查询 参数 以 及 其 他 ASP. NET 参数 对 象 中 的 参数 值 提 供给 这 些 操 
作 。 使 用 EntityDataSource 设计 器 ,可 以 更 方便 地 在 设计 时 配置 EntityDataSource 控件 。 

3. LinqDataSource 控件 

语言 集成 查询 (LINQ) 是 一 种 查询 语法 , 它 可 定义 一 组 查询 运算 符 ,以 便 在 任何 基于 
.NET 的 编程 语言 中 以 一 种 声明 性 的 方式 来 表示 遍历 .筛选 和 投影 操作 。 数 据 对 象 可 以 是 
内 存 中 的 数据 集合 ,或 者 是 表示 数据 库 中 数据 的 对 象 。 不 用 为 每 个 操作 编写 SQL 命令 , 即 
可 检索 或 修改 数据 。 

使 用 LinqDataSource 控件 ,可 以 通过 在 标记 文本 中 设置 属性 ,从 而 在 ASP. NET 网 页 
中 使 用 LINQ。LinqDataSource 控件 使 用 LINQ to SQL 来 自动 生成 数据 命令 。 当 从 内 存 中 
的 数据 集合 检索 数据 时 ,可 将 ContextTypeName 属性 设置 为 包含 该 数据 集合 的 类 。 还 可 将 
TableName 属性 设置 为 返回 该 数据 集合 的 属性 或 字段 。 例 如 ,可 能 存在 一 个 名 为 Person 
的 类 ,该 类 包含 一 个 名 为 FavoriteCities 的 属性 ,该 属性 返回 一 个 字符 串 值 数组 。 这 种 情况 
下 ,要 将 ContextTypeName 属性 设置 为 Person ,将 TableName 属性 设置 为 FavoriteCities 。 

查询 某 数据 库 时 ,必须 先 创建 表示 该 数据 库 及 其 表 的 实体 类 。 可 以 使 用 对 象 关系 设计 
器 或 SqlMetal. exe 实用 工具 来 生成 这 些 类 。 然 后 ,可 将 ContextTypeName 属性 设置 为 表 
示 该 数据 库 的 类 ,并 将 TableName 属性 设置 为 表示 数据 库 表 的 属性 。 

LinqDataSource 控件 按 以 下 顺序 应 用 数据 操作 : Where (指定 要 返回 的 数据 记录 )、 
Order By( 排 序 ) .Group By( 聚 合共 享 值 的 数据 记录 ) .Order Groups By( 对 分 组 数据 进行 排 
序 )、Select( 指 定 要 返回 的 字段 或 属性 )、Auto-sort( 按 用 户 选 定 的 属性 对 数据 记录 进行 排 
序 )、Auto-page( 检 索 用 户 选 定 的 数据 记录 的 子 集 )。 

可 以 向 Where 属性 添加 条 件 ,以 筛选 查询 返回 的 数据 记录 。 如 果 未 设置 Where 属性 ， 
LinqDataSource 控件 会 从 数据 对 象 中 检索 每 一 条 记录 。 数 据 排序 ,使 用 OrderBy 属性 指定 
返回 数据 中 作为 排序 方式 的 属性 的 名 称 。 

4. ObjectDataSource 控件 

ObjectDataSource 是 ASP. NET 数据 源 控件 ,用 于 向 数据 绑 定 控件 表示 数据 识别 中 间 
层 对 象 或 数据 接口 对 象 。 可 以 结合 使 用 ObjectDataSource 控件 与 数据 绑 定 控件 ,这 样 , 只 
用 少量 代码 或 不 用 代码 ,就 可 以 在 网 页 上 显示 、 编 辑 和 排序 数据 。 
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ObjectDataSource 控件 没有 可 视 化 呈现 。 它 是 作为 控件 实现 的 ,以 便 可 以 以 声明 方式 
创建 它 , 还 可 以 选择 让 它 参 与 状态 管理 。 因 此 ,ObjectDataSource 不 支持 可 视 化 功能 ,如 
EnableTheming 或 SkinID 属性 。 

ObjectDataSource 控件 的 一 种 极 常 见 的 应 用 程序 设计 做 法 是 ,将 表示 层 与 业务 逻辑 分 
开 , 将 业务 逻辑 封装 到 业务 对 象 中 。 这 些 业务 对 象 在 表示 层 和 数据 层 之 间 构 成 一 个 独特 的 
层 , 从 而 得 到 一 个 三 层 应 用 程序 结构 。ObjectDataSource 控件 使 开发 人 员 能 够 在 保留 他 们 
的 三 层 应 用 程序 结构 的 同时 ,使 用 ASP. NET 数据 源 控件 。 

ObjectDataSource 控件 使 用 反射 创建 业务 对 象 的 实例 ,并 调用 这 些 实例 的 方法 以 检索 、 
更 新 、 插 入 和 删除 数据 。TypeName 属性 标识 ObjectDataSource 使 用 的 类 的 名 称 。 
ObjectDataSource 控件 在 每 次 调用 方法 时 创建 并 销毁 类 的 实例 , 它 在 Web 请 求 的 生存 期 内 
不 在 内 存 中 保留 对 象 。 如 果 使 用 的 业务 对 象 需要 很 多 资源 或 者 在 其 他 方面 需要 很 大 开销 来 
创建 和 销毁 ,就 需要 认真 考虑 。 使 用 高 开销 对 象 可 能 并 不 是 最 佳 设 计 选择 ,但 是 可 以 使 用 
ObjectCreating、ObjectCreated 和 ObjectDisposing 事件 控制 该 对 象 的 生命 周期 。 

5. XmlDataSource 控件 

XmlDataSource 控件 是 向 数据 绑 定 控件 提供 XML 数据 的 数据 源 控件 。 数 据 绑 定 控件 
可 使 用 XmlDataSource 控件 同时 显示 分 层 数据 和 表格 数据 。XmlDataSource 控件 通常 用 于 
显示 只 读 方 案 中 的 分 层 XML 数据 由 于 XmlDataSource 控件 扩展 了 
HierarchicalDataSourceControl 类 ,因此 该 控件 使 用 分 层 数 据 。XmlDataSource 控件 也 实现 
IDataSource 接口 ,使 用 表格 (或 列表 样式 ) 数 据 。 

XmlDataSource 通常 从 DataFile 属性 指定 的 XML 文件 中 加 载 XML 数据 。 也 可 以 使 
用 Data 属性 ,由 数据 源 控件 将 XML 数据 直接 存储 为 字符 串 形 式 。 如 果 要 在 数据 绑 定 控件 
显示 XML 数据 前 转换 它 ,可 提供 可 扩展 样式 表 语 言 (XSL) 样 式 表 进 行 转换 。 和 XML 数据 
一 样 ,通常 从 Transform File 属性 指示 的 文件 中 加 载 样式 表 , 而 使 用 Transform 属性 将 其 直 
接 存储 为 字符 串 形式 。 

XmlDataSource 控件 通常 用 于 由 数据 绑 定 控件 显示 XML 数据 的 只 读数 据 方案 中 ,但 
也 可 以 使 用 XmlDataSource 控件 来 编辑 XML 数据 。 若 要 编辑 XML 数据 ,请 调用 
GetXmlDocument 方法 来 检索 XmlDataDocument 对 象 . 该 对 象 是 XML 数据 在 内 存 中 的 表 
示 形 式 。 可 以 使 用 由 XmlDataDocument 公开 的 对 象 模型 及 其 所 包含 的 XmlNode 对 象 或 使 
用 XPath 筛选 表达 式 来 操作 文档 中 的 数据 。 更 改 XML 数据 在 内 存 中 的 表示 形式 后 ,可 以 
调用 Save 方法 将 其 保存 到 磁盘 中 。 

对 XML 数据 执行 的 常用 操作 是 将 其 从 一 个 XML 数据 集 转换 到 另 一 个 数据 集 。 
XmlDataSource 控件 支持 使 用 Transform 和 Transform File 属性 (在 将 XML 数据 传递 到 
数据 绑 定 控件 前 ,指定 XSL 样式 表 , 并 应 用 于 该 XML 数据 ), 以 及 Transform 
ArgumentList 属性 (转换 期 间 能 够 提供 由 XSL 样式 表 使 用 的 动态 XSLT 样式 表 参 数 ) 进 行 
XML 转换 。 若 使 用 XPath 属性 指定 XPath 筛选 表达 式 , 则 在 发 生 转换 后 应 用 该 表达 式 。 

默认 情况 下 ,XmlDataSource 控件 加 载 XML 文件 中 由 DataFile 属性 标识 的 所 有 XML 
数据 ,或 在 Data 属性 中 找到 的 所 有 内 联 数据 ,但 是 ,可 以 使 用 XPath 表达 式 来 筛选 这 些 数 
据 。XPath 属性 支持 XPath 语法 筛选 器 .可 在 加 载 和 转换 XML 数据 后 应 用 该 科 选 器 。 
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6. SiteMapDataSource 控件 

SiteMapDataSource 控件 是 站 点 地 图 数据 的 数据 源 , 站 点 数据 则 由 为 站 点 配置 的 站 点 
地 图 提供 程序 进行 存储 。SiteMapDataSource 使 不 是 专用 站 点 导航 控件 的 Web 服务 器 控件 
(如 TreeView、Menu 和 DropDownList 控件 ) 可 以 绑 定 到 分 层 站 点 地 图 数据 。 可 以 使 用 这 
些 Web 服务 器 控件 以 目录 形式 显示 站 点 地 图 或 者 主动 在 站 点 内 导航 。 也 可 以 使 用 
SiteMapPath 控件 ,该 控件 被 专门 设计 为 一 个 站 点 导航 控件 ,因此 不 需要 
SiteMapDataSource 控件 的 实例 。 


8.4.9 ASP.NET 的 数据 绑 定 控件 对 象 
数据 的 显示 部 分 使 用 了 一 些 专门 的 显示 控件 ,通过 这 些 控件 可 以 以 可 视 化 的 方式 查看 
绑 定数 据 之 后 的 效果 。 我 们 称 这 些 控件 为 数据 绑 定 控件 。 常 见 的 数据 绑 定 控件 见 表 8-28。 
表 8-28 常见 的 数据 绑 定 控件 


数据 绑 定 控件 描 述 
支持 删改 排序 、 分 页 .外观 设置 、 自 定义 显示 数据 ,但 是 影响 程序 性 能 ,不 支持 


插入 操作 
提供 了 增 、 删 \ 改 、 排 序 分 页 等 功能 ,还 可 以 支持 用 户 自 定义 模板 ,但 影响 程序 性 





GridView 控件 




















ListView 控件 。 | 能 ,大 数据 分 页 效率 低 

RU 要 件 | 并 件 是 一 个 完全 的 开发 信 基 伯 ,可 以 和 基地 最 示 用 户 冯 定 义 的 显示 方式 不 
支持 分 页 .排序 ,编辑 , 仅 提供 重复 模板 内 容 

Datalist 控 件 ”| 可 以 自 定义 格式 显示 数据 、 比 较 灵活 ,但 不 支持 分 页 .编辑 插入 

DerailsView 控件 | 一 条 记录 ,一 行 一 个 字段 ， 带 分 页 功能 

FormView 控件 ”| 一 条 记录 ,自由 定制 ; 带 分 页 功能 


数据 绑 定 控件 的 一 些 常用 属性 。 

DataSource 属性 : 指定 数据 绑 定 控件 的 数据 来 源 ,显示 时 程序 将 会 从 这 个 数据 源 中 获 
取 数 据 并 显示 。 

DataSourceID 属性 : 指定 数据 绑 定 控件 的 数据 源 控 件 的 ID, 显 示 的 时 候 程 序 将 会 根据 
这 个 ID 找到 相应 的 数据 源 控件 ,并 利用 这 个 数据 源 控件 中 指定 的 方法 获取 数据 并 显示 。 

DataBind() 方 法 : 当 指定 了 数据 绑 定 控件 的 DataSource 属性 或 者 DataSourceID 属性 
之 后 ,再 调用 DataBind() 方 法 才 会 显示 绑 定 的 数据 。 并 且 在 使 用 数据 源 时 ,会 首先 尝试 使 
用 DataSourceID 属性 标识 的 数据 源 。 没 有 设置 DataSourceID 时 才 会 用 到 DataSource 属性 
标识 的 数据 源 。 也 就 是 说 ,DataSource 和 DataSourceID 两 个 属性 不 能 同时 使 用 。 

1， GridView 控件 

GridView 控件 以 表格 形式 (table 标签 ) 显 示 、 编 辑 和 删除 多 种 不 同 的 数据 源 ( 如 数据 
库 、XML 文件 以 及 集合 等 ) 中 的 数据 。GridView 控件 功能 非常 强大 ,如 果 需 要 ,编程 者 可 以 
不 用 编写 任何 代码 ,通过 拖 动 控件 ,并 从 属性 面板 设置 属性 即 可 ,还 可 以 完成 如 分 页 .排序 、 
外 观 设置 等 功能 。 虽 然 功能 非常 齐全 ,但 程序 性 能 将 受到 影响 ,在 页 面 中 最 好 不 要 过 多 地 使 
用 该 控件 。 当 然 ,如 果 需 要 自 定义 格式 显示 各 种 数据 ,GridView 控件 也 提供 了 用 于 编辑 格 
式 的 模板 功能 ,但 是 不 支持 数据 的 插入 。 

【 例 8-23】 GridView 控件 实现 数据 的 管理 功能 。 
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第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 ”命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 窗 体 ”, 名 称 设置 为 Ex8-24. aspx, 并 设置 Ex8-24. aspx 为 起 始 页 。 

第 2 步 , 在 Ex8-24. aspx 页 面 添加 GridView 控件 
和 SqlDataSource 控件 。 

第 3 步 , 为 SqlDataSource 控件 配置 数据 ,连接 字 


尾 性 eh 
SqlDatasourcel System.Web.ULWebContrcls SqlDatasov 


EA 


























CancelSelectOnNullParame True 
符 串 为 “Provider 王 Microsoft. ACE. OLEDB. 12. 0; ConflictDetection i 
Connectionstring 9 Provider=Microsoft ACE.C 
Data Source 二 D: \ 教 材 编写 \ 第 8 章 ASP\ Asp DataSourceMode Dataset 
DeleteCommandType Text 
Websites\ student. accdb;”。 Cr (i 国 
第 4 步 ,为 SqlDataSource 控件 添加 DeleteQuery En 让 
命令 : 在 图 8-29 所 示 的 “属性 ”对 话 框 中 单 击 [ee 
DeleteQuery, 在 如 图 8-30 所 示 的 弹出 对 话 框 中 编辑 图 8-29 “属性 ”对 话 框 
删除 命令 。 
Fe wee) 
DELETE 命令 (QO: 
DELETE from [Basicinfor] where fIDJ]=@ID - 
Go) 
PE): 
名 称 什 




















图 8-30 ”删除 对 话 框 


第 5 步 ,类 似 地 ,为 SqlDataSource 控件 添加 插入 属性 ,更 新 属性 对 话 框 。 在 Ex8-24. 
aspx 文件 中 生成 如 下 代码 。 


<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:accessConstr %>" 
ProviderName = "<% $ ConnectionStrings:accessConstr.ProviderName % >" 
SelectCommand = "SELECT x* FROM [BasicInfor]" 

UpdateCommand = "UPDATE [BasicInfor] SET 学 号 = @ 学 号 ,姓名 = @ 姓 名 , 身份 证 = @ 身 份 证 
WHERE ID = @ID" 

DeleteCommand = "DELETE from [BasicInfor] where [ID] = @ID" > 

< UpdateParameters> 

<asp:Parameter Name = "ID" Type = "Int16"/> 

<asp:Parameter Name = "学 号 " TYpe= "String" /> 

<asp:Parameter Name = "姓名 " Type = "String" /> 
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<asp:Parameter Name = "身份 证 " Type = "String" /> 
</UpdateParameters > 

< DeleteParameters > 

<asp:Parameter Name = "ID" Type = "Int16"/> 
</DeleteParameters > 

</asp:SqlDataSource> 


第 6 步 ,为 GridView 控件 设置 属性 ,在 如 图 8-31 所 示 的 对 话 框 中 色 选 启用 分 页 、 启 用 


排序 、 启 用 编辑 、 启 用 删除 和 启用 选 定 内 容 等 复 选 框 。 设置 属 性 DataSourceID 为 
SqlDataSourcel。 在 Ex8-24. aspx 文件 中 生成 如 下 代码 。 





Ex8-24.aspx* xB 


=_ >QlUarasource 上 
asp:GridView#GridViewt| 



































学 号 身份 证 
编辑 删除 ”选择 本 了 是 数据 绑 定 本 数据 摸 定 | | 
编辑 “ 肝 除 ”选择 数据 绑 定数 据 绑 定数 据 绑 定数 据 绑 定 | | ee 
编辑 肌 际 ”选择 数据 郑 宝 数据 纤 定 数据 绑 定 数据 纤 定 | | 于 8x 杰 |SqlDataSource1 加 
编辑 “是 际 选择 数据 郑 定数 据 绑 定数 据 奋 定数 据 郑 定 | | 包 Bx 直 一 
编辑 是 陆 ”选择 数据 绑 定 数据 绑 定 数据 绑 定数 据 绑 定 | | Basetg 
编辑 出 除 选择 数据 绑 定数 据 绑 定数 据 绑 定 数据 绑 定 
编辑 叫 除 选择 数据 绑 定数 据 绑 定 数据 纪 定 数据 振 定 | | 需 到 
编辑 册 除 选择 数据 绑 定数 据 绑 定 数据 绑 定 数据 绑 定 | | 短 ic 列 ,. 
编 答 “ 则 除 选择 数据 绑 定数 据 绑 定数 据 绑 定 数据 绑 定 | | 品 启用 分页 了 
编 缉 ”是 际 选择 数 据 顷 定 数据 绑 定 数据 绑 定数 据 振 定 
12 贺 启用 排序 
贺 启用 编 壹 
学 a 
学 
姓名 | 辐 启用 删除 
身份 证 | 圆 启用 选 定 内 容 
‘ 妃 罚 入 板 














8-31 ”GridView 属性 设置 对 话 框 


<asp:GridView ID = "GridViewl" runat = "server" AutoGenerateColumns = "False" DataKeyNames = 
ID" 
DataSourceID = "SqlDataSourcel" AllowPaging = "True" AllowSorting = "True" 
RutoGenerateDeleteButton = "True" AutoGenerateEditButton = "True" 
AutoGenerateSelectButton = "True"> 
< Columns > 

<asp:BoundField DataField = "ID" HeaderText = "ID" InsertVisible = "False" ReadOnly = "True" 
SortExpression = "ID" /> 
<asp:BoundField DataField = "学 号 " HeaderText = "学 号 ”SortExpression = "学 号 " /> 
<asp:BoundField DataField= "姓名 "HeaderText = "姓名 ”SortExpression = "姓名 " /> 
<asp:BoundField DataField = "身份 证 " HeaderText = "身份 证 ”SortExpression = "身份 证 " /> 
</Columns > 

</asp:GridView> 


第 7 步 , 运 行程 序 , 得 到 如 图 8-32 所 示 的 查询 结果 。 选 择 第 1 条 记录 的 编辑 按钮 ,得 到 
如 图 8-33 所 示 的 编辑 界面 ,把 姓名 “ 张 三 ” 改 为 “ 张 三 2”, 单 击 “ 更 新 ”按钮 ,得 到 如 图 8-34 所 
示 的 结果 。 

2. ListView 控件 

ListView 控件 会 按照 编程 者 编写 的 模板 格式 显示 数据 。 与 DataList 和 Repeater 控件 
相似 ,ListView 控件 也 适用 于 任何 具有 重复 结构 的 数据 。ListView 既 有 Repeater 控件 的 
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四 | 学 号 | 姓名 | 身份 证 
给 辑 册 内 选择 |1 |093121| 张 三 1 |112323123131 
编辑 册 团 选择 |> |093122| 李 四 |223333432434| 
组 辑 出 陈 选择 |3 |093123| 王 五 “|324234324324| 
线 名 而 陈 选择 4 |093124| 阿 庆 珊 |123243243244| 









































8-32 ”查询 结果 










































































DD BE 姓名 身份 证 
更 新 取消 1 |093121 张 三 2 x] 112323123131 
编 瞄 届 喀 选择 2 093122 李 四 223333432434 
编辑 删除 选择 3 .093123 芋 五 324234324324 
强 答 型 院 葛 择 |4 093124 阿 庆 现 123243243244 
图 8-33 ”编辑 结果 








加 | 学 号 | 姓名 | 身份 证 

阵 生 出 除 选择 1 |093121| 张 三 2 |112323123131 
加 于 透 择 ? |093123| 李 四 ”|223333432434 
| 晤 强 删除 选择 3 |093123| 王 五 ”|324234324324 
红 强 而 除 选择 4 |093124| 阿 庆 现 |123243243244 





























图 8-34 更 新 的 结果 


开放 式 模板 ,又 具有 GridView 控件 的 编辑 特性 。ListView 控件 是 ASP. NET 3.5 新 增 的 
控件 ,其 分 页 功能 需要 配合 DataPager 控件 实现 。 但 是 ,对 于 大 量 数据 来 说 ,其 分 页 的 效率 
很 低 , 所 以 在 下 一 节 , 我 会 带领 大 家 做 一 个 高 效 的 分 页 。 总 的 来 说 ,ListView 是 目前 为 止 功 
能 最 齐全 、 最 好 用 的 数据 绑 定 控件 。 

3。Repeater 控件 

Repeater 控件 是 一 个 数据 绑 定 容器 控件 ,用 于 生成 各 个 子 项 的 列表 ,这 些 子 项 的 显示 
方式 可 以 完全 由 编程 者 自己 编写 。 当 控件 所 在 页 面 运行 时 ,该 控件 根据 数据 源 中 数据 行 的 
数量 重复 模板 中 所 定义 的 数据 显示 格式 ,编程 者 可 以 完全 把 握 数 据 的 显示 布局 ,如 使 用 div 
元 素 .ul 元 素 等 。 但 是 ,美中不足 的 是 该 控件 不 支持 像 排 序 、 分 页 编辑 之 类 的 功能 , 仅 支持 
重复 模板 内 容 功 能 。 

4. DataList 控件 

该 控件 可 以 以 自 定义 的 格式 显示 各 种 数据 源 的 字段 ,其 显示 数据 的 格式 在 创建 的 模板 
中 定义 ,可 以 为 项 、 交 替 项 、 选 定 项 和 编辑 项 创建 模板 。DataList 控件 也 可 以 使 用 标题 .脚注 
和 分 隔 符 模板 自 定 义 整 体外 观 ,还 可 以 一 行 显示 多 个 数据 行 。 虽然 DataList 控件 拥有 很 大 
的 灵活 性 ,但 其 本 身 不 支持 数据 分 页 ,编程 者 需要 通过 自己 编写 方法 完成 分 页 的 功能 。 该 控 
件 仅 用 于 数据 的 显示 ,不 支持 编辑 插入、 删除 。 


S。DetailsView 控件 
DetailsView 控件 一 次 呈现 一 条 表格 形式 的 记录 ,并 提供 翻阅 多 条 记录 以 及 插入、 更 新 
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和 删除 记录 的 功能 。DetailsView 控件 通常 用 在 主 /详细 信息 方案 中 。 在 这 种 方案 中 , 主 控 
件 ( 如 GridView 控件 ) 中 的 所 选 记录 决定 了 DetailsView 控件 显示 的 记录 。 

6. FormView 控件 

FormView 控件 与 DetailsView 控件 类 似 , 它 一 次 呈现 数据 源 中 的 一 条 记录 ,并 提供 翻 
阅 多 条 记录 以 及 插入 、 更 新 和 删除 记录 的 功能 。FormView 控件 与 DetailsView 控件 之 间 的 
区 别 在 于 : DetailsView 控件 使 用 基于 表格 的 布局 ,在 这 种 布局 中 ,数据 记录 的 每 个 字段 都 
显示 为 控件 中 的 一 行 ; 而 FormView 控件 则 不 指定 用 于 显示 记录 的 预定 义 布 局 。 实 际 上 ， 
将 创建 包含 控件 的 模板 ,以 显示 记录 中 的 各 个 字段 。 该 模板 包含 用 于 设置 窗 体 布局 的 格式 、 
控件 和 绑 定 表 达 式 。 








8.5 ASP 的 Web 服务 编程 


不 同 的 系统 之 间 经 常 需要 数据 的 交换 对 接 ,而 Web Service 技术 能 使 得 运行 在 不 同 机 
器 上 的 不 同 应 用 无 须 借助 附加 的 、 专 门 的 第 三 方 软件 或 硬件 ,就 可 相互 交换 数据 或 集成 。 依 
据 Web Service 规范 实施 的 应 用 ,无 论 它们 使 用 的 语言 .平台 或 内 部 协议 是 什么 ,都 可 以 相 
互 交 换 数据 。Web Service 是 自 描述 、 自 包含 的 可 用 网 络 模块 ,可 以 执行 具体 的 业务 功能 。 
Web Service 也 很 容易 部 署 , 因 为 它们 基于 一 些 常 规 的 产业 标准 以 及 已 有 的 一 些 技 术 , 如 标 
准 通用 标记 语言 下 的 子 集 XML HTTP。Web Service 减少 了 应 用 接口 的 花费 。 

Web Service 也 称 XML Web Service WebService, 是 一 种 可 以 接收 从 Internet 或 者 
Intranet 上 的 其 他 系统 中 传递 过 来 的 请 求 , 轻 量 级 的 独立 的 通信 技术 。Web Service 为 整个 
企业 甚至 多 个 组 织 之 间 的 业务 流程 的 集成 提供 了 一 个 通用 机 制 。 


8.5.1 Web 服务 的 创建 与 发 布 


通过 简单 对 象 存 取 协议 (Simple Object Access Protocol,SOAP) 在 Web 上 提供 的 软件 
服务 ,使 用 网 络 服务 描述 语言 (Web Services Description Language,， WSDL) 文 件 进 行 说 明 ， 
并 通过 通用 描述 、 发 现 与 集成 (Universal Description Discovery and Integration,UDDI) 进 
行 注册 。 

SOAP 是 XMLWeb Services 的 通信 协议 。 当 用 户 通过 UDDI 找到 WSDL 描述 文档 
后 ,可 以 通过 SOAP 调用 建立 的 Web 服务 中 的 一 个 或 多 个 操作 。SOAP 是 XML 文档 形式 
的 调用 方法 的 规范 , 它 可 以 支持 不 同 的 底层 接口 , 像 HTTP(S) 或 者 SMTP。 

WSDL 文件 是 一 个 XML 文档 ,用 于 说 明 一 组 SOAP 消息 以 及 如 何 交换 这 些 消息 。 大 
多 数 情况 下 ,WSDL 文件 由 软件 自动 生成 和 使 用 。 

UDDI 是 一 个 主要 针对 Web 服务 供应 商 和 使 用 者 的 新 项 目 。 在 用 户 能 够 调用 Web 服 
务 之 前 ,必须 确定 这 个 服务 内 包含 哪些 商务 方法 ,找到 被 调用 的 接口 定义 ,还 要 在 服务 端 编 
制 软 件 。UDDI 是 一 种 根据 描述 文档 来 引导 系统 查找 相应 服务 的 机 制 。UDDI 利用 SOAP 
消息 机 制 (标准 的 XMLVHTTP) 来 发 布 、 编 辑 ` 浏 览 以 及 查找 注册 信息 。 它 采用 XML 格式 
来 封装 各 种 不 同类 型 的 数据 ,并 且 发 送 到 注册 中 心 或 者 由 注册 中 心 返回 需要 的 数据 。 

每 个 XMLWeb Services 都 需要 一 个 唯一 的 命名 空间 ,以 便 客户 端 应 用 程序 能 够 将 它 与 
Web 上 的 其 他 服务 区 分 开 。http://tempuri. org/ 可 用 于 处 于 开发 阶段 的 XML Web 
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Services ,而 已 发 布 的 XML Web Services 应 使 用 更 永久 的 命名 空间 。 应 使 用 控制 命名 空间 
来 标识 XML Web Services。 例 如 ,可 以 使 用 公司 的 Internet 域名 作为 命名 空间 的 一 部 分 。 
尽管 有 许多 XML Web Services 命名 空间 看 似 URL, 但 它们 不 必 指 向 Web 上 的 实际 资源 。 
(XML Web Services 命名 空间 为 URD 使 用 ASP. NET 创建 XML Web Services 时 ,可 以 使 
用 Web Services 特性 的 Namespace 属性 更 改 默认 命名 空间 。Web Services 特性 适用 于 包 
含 XML Web Services 方法 的 类 。 

WebMethod 有 6 个 属性 : Description、EnableSession、MessageName、TransactionOption 、 
CacheDuration .BufferResponse。 

(1) Description ,对 WebService 方 法 描述 的 信息 。 就 像 WebService 方法 的 功能 注释 ， 
可 以 让 调用 者 看 见 的 注释 。 

(2) EnableSession 指示 WebService 是 否 启 动 Session 标志 ,主要 通过 Cookie 完成 , 默 
认为 False。 

(3) MessageName, 主要 实现 方法 重 载 后 的 重 命名 。 

(4) TransactionOption ,指示 XML Web Services 方法 的 事务 支持 。 

由 于 HTTP 的 无 状态 特性 ,XMLWeb Services 方法 只 能 作为 根 对 象 参与 事务 。 如 果 
COM 对 象 与 XML Web Services 方法 参与 相同 的 事务 ,并 且 在 组 件 服务 管理 工具 中 被 标记 
为 在 事务 内 运行 ,XML Web Services 方法 就 可 以 调用 这 些 COM 对 象 。 

如 果 一 个 TransactionOption 属性 为 Required 或 RequiresNew 的 XMLWeb Services 
方法 调用 , 另 一 个 TransactionOption 属性 为 Required 或 RequiresNew 的 XML Web 
Services 方法 调用 ,每 个 XML Web Services 方法 将 参与 它们 自己 的 事务 ,因为 XML Web 
Services 方法 只 能 用 作 事 务 中 的 根 对 象 。 如 果 异 常 是 从 Web 服务 方法 引发 的 或 未 被 该 方 
法 捕获 , 则 自动 放弃 该 事务 。 如 果 未 发 生 异 常 , 则 自动 提交 该 事务 ,除非 该 方法 显 式 调用 
SetAbort 。 

(5) CacheDuration, Web 支持 输出 高 速 缓存 ,这 样 Web Services 不 需要 多 次 执行 ,就 可 
以 提高 访问 效率 ,而 CacheDuration 就 是 指定 缓存 时 间 的 属性 。 

(6) Buffer Response, 获 取 或 设置 是 否 缓冲 该 请 求 的 响应 。 

【 例 8-24】 创建 一 个 简单 的 加 法 功能 的 WebService。 

第 1 步 ,打开 AspWebsite 网 站 ,选择 “添加 新 项 "命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 
选择 “Web 服务 ”, 如 图 8-35 所 示 , 名称 设置 为 Ex8-WebService. asmx, 并 设置 Ex8- 
WebService. asmx 为 起 始 页 。 

第 2 步 ,系统 自动 生成 Ex8-WebService. asmx 文件 。 

using System; 

using System. Collections. Generic; 

using System.Linq7 

using System. Web; 

using System. Web. Services; 

// < summary> 

// Ex8_WebService 的 摘要 说 明 


// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
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4 BE 法 排 IE: [区 内 全 徐 雪 已 安 半 入 本 (Ctrl 1 日 p -| 
Visual Basic [03 WCF 服务 (支持 jag VisualC# © Re VieualC# 
Visual C# 全 用 于 凶 建 Web 服务 的 可 视 没 计 关 
联机 Web ant Controller Class (wD) Visual C# 
es 
Web Ap Visual C# 
I cs 
Vieual C# 
| 
Visual ce | 
加 
XML 文件 Visual ce 
加 
DR xstr 广 人 Visual C# 
as AN 
下 
投向 导 vaalcr 必 
so 
名 称 [N): WebService.asmx 区 柠 代 玛 交 在 单 台 的 文件 中 (P) 
ESO 


图 8-35 ”Web 服务 添加 


[WebServiceBinding(Conform sTo = WsiProfiles.BasicProfilel 1)] 
// 若 允许 使 用 ASP. NET AJAX 从 脚本 中 调用 此 Web 服务 ,请 取消 注释 以 下 行 
//[System. Web. Script. Services. ScriptService] 
public class Ex8_WebService: System. Web. Services. WebService { 
public Ex8_WebService () { 
// 如 果 使 用 设计 的 组 件 ,请 取消 注释 以 下 行 
//InitializeComponent( ); 
} 
[WebMethod] 
public string HelloWorld() { 
return "Hello World"; 


} 
第 3 步 ,运行 程序 ,得 到 如 图 8-36 所 示 的 界面 。 





此 Web 县 务 抽 由 http-/ /tempuri.org/ 作为 时 认 合同 
建议 从 开 XML Web services 之 前 , 计 下 对 认命 和 全 目 - 


下 人 XNL Web sevces 天 主要 过 -自生 二 可 以 全 


中 浊 失 时 和 必 实 夫 后 记 JIL Web servces. Bsr- 





人 eASP NET 站 间 XML Web sommes 时 .可以 WebService 和 amascace 员 





8-36 程序 运行 结果 
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第 4 步 , 单 击 HelloWorld, 结 果 如 下 。 


<?xml version = "1.0" encoding = "UTF — 8"?> 
< string xmlns = "http://tempuri. org/"> Hello World </string> 


8.5.2 Web 服务 的 使 用 


通过 这 个 实例 ,可 以 看 出 WebService 的 复 用 性 ,简单 易 用 。 在 VS 的 环境 下 ,可 以 轻易 
完成 一 个 WebService 的 开发 过 程 。 而 WebService 返 





口 添 i 新 项 (W).. Ctrl+Shift+A 
回 给 的 XML 数据 方式 ,也 可 以 充分 和 JavaScript 等 任 ”名 天 6). Shift+ Alt+A 
何 一 种 可 以 处 理 XML 的 语言 相 结合 来 完成 需求 。 HD) 
添加 ASPJNET 文件 夫 (S) ， 
【 例 8-25】 引用 WebService 的 过 程 。 新 建 虚拟 目录 (V).。 


第 1 步 , 打 开 AspWebsite 网 站 ,选择 “添加 新 项 ” 引用 (R).-. 
命令 ,在 弹出 的 添加 新 项 的 对 话 框 中 选择 “Web 窗 体 ”， 要 和 3 用 全 = 





名 称 设置 为 Ex8-25. aspx, 并 设置 Ex8-25. aspx 为 起 。 WEPen 
始 页 。 JavaScript 文件 
第 2 步 , 右 击 AspWebsite, 选 择 * 添 加 按钮 "命令 ， 和 
得 到 如 图 8-37 所 示 的 菜单 。 8-37 添加 菜单 


第 3 步 ,选择 “服务 引用 ”命令 ,得 到 如 图 8-38 所 示 
的 添加 服务 引用 界面 , 单 击 “ 发 现 ” 按 钮 ,找到 Ex8-WebService. asmx, 命名 空间 设置 为 
ServiceReferencel 。 


若 要 坦 看 特定 服务 器 上 的 可 用 服务 列表， 请 给 入 服务 URL , 然后 单 去 “ 转 到 ”。 若 要 浏览 可 用 的 服务 ， 请 单 

















击 “发 现 ” . 

地 址 (A): 

httpi/localhost32131/Ex8-WebService.asmx - [wag | | [aol 
服务 (5): 扣 作 (Oj: 





v OR Ex8-WebService.asmx 


选择 最 务 协定 以 查 志 其 径 作 - 














在 解决 方案 中 找到 1 个 服务 . 


命名 空间 (N): 


ServiceReferencel 
ET 


图 8-38 添加 服务 引用 界面 
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在 解决 方案 中 出 现 ServiceReferencel 命名 空间 的 服务 如 图 8-39 所 示 。 





解 志 方 室 资 源 管 理 器 ”3x 
S99h|le-e 人 Rms 

放 革 解决 方 安 资 源 管理 条 (Ctr| 1) Pp- 
网 解 块 方案 “Aspwebsite”(1 个 项 目 ) 入 
4 © Aspwebsite 





图 002jpg 
b A Ex8-l.aspx 

》 Ex8-10.aspx 
b A Ex8-11.aspx 
> A Ex8-12.aspx 
b EX813.aspx 
b EX8-14.aspx 
> A Ex8-15.aspx 
b 出 Ex8-16.aspx 


图 8-39 ServiceReferencel 命名 空间 


第 4 步 ,在 EEx8-25. aspx. cs 中 添加 如 下 代码 。 


protected void Page_Load(object sender, EventArgs e) 
{ 
ServiceReferencel. Ex8_WebServiceSoapClient mys = new ServiceReferencel.Ex8_ 
WebServiceSoapClient( ); 
Response. Write(mys. HelloWorld() + "</br >"); 
Response. Write(mys. HelloChina() + "</br>"); 
Response. Write(mys. Add(1,2) + "</br>"); 
Response. Write(mys. Add2(1,2,3) + "</br>"); 
Response. Write(mys. Count() + "</br>"); 
Response. Write(mys. CountNum() + "</br>"); 
} 


第 5 步 ,运行 程序 ,结果 如 下 。 


Hello World 


Hello China 
3 
6 
和 
和 
8.6 习 题 
1. 比较 ASP. NET DataReader 和 DataSet 对 象 的 异同 。 
2. 描述 ADO. NET 中 常用 的 对 象 。 
3. 说 明 在 ASP. NET 中 常用 的 几 种 页 面 间 传 递 参数 的 方法 ,并 说 出 它们 的 优 缺 点 。 
4. 简 述 Web 标准 服务 器 控件 和 HTML 元 素 的 区 别 与 联系 。 
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5. 简要 叙述 ASP. NET 的 常用 内 置 对 象 。 

6. 简要 分 析 ASP. NET 页 面 的 生命 周期 。 

7. 使 用 ASP. NET 的 FileUpload 控件 以 及 一 个 保 
存 按钮 和 一 个 真实 文件 名 称 、 类 型 .长 度 的 标签 控件 , 设 
计 如 图 8-40 所 示 的 界面 ,实现 一 个 文件 上 传 到 c:\ 
SaveDirectory 文件 夹 的 功能 ,并 输出 上 传 文件 的 
FileName、ContentType\ContentLength、FileName。 

8. 使 用 ASP. NET 实现 一 个 数据 库 的 查询 功能 。 
使 用 本 地 服务 器 ,SQL Server 数据 库 名 为 Student, 用 户 
sa 的 密码 为 123456 ,数据 表 有 basicInfo, 将 结果 绑 定 到 
GridViewl 输出 。 


File Upload: 

Browse..- 
a 
[fbimessage] 


8-40 文件 上 传 界面 





XML 编程 


9.1 XML 简介 及 其 特征 


9.1.1 XML 简介 


XML 是 可 扩展 标记 语言 (eXtensible Markup Language) 的 缩写 。XML 可 追溯 到 1969 
年 IBM 公司 设计 的 通用 标记 语言 (Generalized Markup Language'GML) ,用 于 描述 文件 和 
格式 。 这 个 项 目 组 于 1980 年 推出 了 标准 通用 标记 语言 (Standard Generalized Markup 
Language,SGML), 可 用 于 文本 、 图 像 、 视 频 、 动 画 等 一 切 电子 格式 的 文档 ,于 1986 年 获得 
ISO 批准 。SGML 从 内 容 和 结构 两 个 方面 描述 文档 ,核心 是 文档 类 型 定义 (Document Type 
Definition, DTD) 。 

源 于 SGML 的 超 文 本 标记 语言 (HyperText Markup Language,HTML) 在 互联 网 上 得 
到 了 广泛 使 用 。 但 是 ,HTML 只 与 固定 的 与 外 观 显 示 的 格式 有 关 , 标 记 也 比较 少 ,对 数学 、 
化 学 .音乐 等 特定 领域 的 表示 支持 较 少 ,开发 者 很 难 在 Web 网 页 上 表示 数学 公式 ,化 学 分 子 
式 和 乐谱 等 。 

为 此 ,万 维 网 联盟 (World WideWeb Consortium,W3C) 于 1996 年 成 立 委员 会 研究 新 的 
标记 语言 ,以 解决 上 述 问题 。1998 年 ,这 个 项 目 组 向 W3C 提交 了 XML 的 推荐 标注 , 即 
XML 1.0。1999 年 ,W3C 组 织 提出 了 XHTML。2004 年 推出 了 XML1.1 标注。 

从 1998 年 以 来 ,许多 厂商 包括 Adobe、IBM、Microsoft、Netscape、Oracle 等 开始 使 用 
XML 标注 。 目 前 许多 软件 产品 和 工具 ,包括 Navigator、Internet Explorer、Real Pleayer 
等 ,在 软件 内 部 都 开始 使 用 XML。 

IE 浏览 器 有 内 置 的 MSMXL 解析 器 ,它们 存在 于 在 IE 5 或 更 高 版 本 的 COM 组 件 中 。 
MSXML 2.5 随 IE 5.5 安装 ,MSXML Parser 3.0 随 IE 6.0 自动 安装 。 

Mozilla 浏览 器 用 EXPat 解释 XML ,支持 XML 十 CSS、 命 名 空间 和 XSLT。 

Firefox 从 1. 0. 2 版 本 开始 ,支持 XML 、XSLT 和 CSS。 

Netscape 从 8.0 版 本 开始 ,使 用 Mozilla 的 引擎 ,具有 相同 的 功能 。 

Opera 从 9. 0 版 本 开始 ,支持 XML、XSLT 和 CSS。 

XML 是 基于 文本 格式 的 语言 ,可 以 用 记事 本 或 写字 板 等 文本 编辑 器 编辑 。 此 外 ,还 有 
一 些 专业 的 编辑 器 : XMLSpy 是 目前 公认 的 最 好 的 XML 编辑 器 之 一 ,是 一 个 XML 工程 开 
发 的 集成 开发 环境 。XMLWriter 是 适合 专业 XML 开发 者 以 及 初级 者 使 用 的 XML 编辑 工 
具 , 支 持 XML、XSL、DTD/Schema、CSS、HTML 等 文本 编辑 和 调式 。 
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9.1.2 XML 的 特征 


1. 结构 性 和 语义 性 

XML 只 是 一 种 语义 语言 ,XML 标记 描述 的 是 文档 的 结构 和 意义 ,不 描述 页 面 元 素 的 
格式 化 。 文 档 本 身 只 是 说 明文 档 包括 了 什么 标记 ,而 不 是 说 明文 档 看 起 来 是 什么 样 的 。 而 
HTML 文档 既 有 结构 .语义 ,还 有 格式 化 的 标记 ,如 < b > 是 粗 体 的 格式 化 标记 ,< td > 是 表格 
单元 的 结构 标记 ,< strong > 是 表示 强调 内 容重 要 的 语义 标记 。 

XML 将 数据 内 容 和 显示 格式 分 离 , 即 能 够 在 HTML 文件 之 外 将 数据 存储 在 XML 文 
档 中 ,这 样 可 以 使 开发 者 集中 精力 使 用 HTML 做 好 数据 的 显示 和 布局 ,并 确保 数据 改动 时 
不 会 导致 HTML 文件 也 需要 改动 ,从 而 方便 维护 页 面 。XML 也 能 够 将 数据 以 “数据 岛 " 的 
形式 存储 在 HTML 页 面 中 ,开发 者 依然 可 以 把 精力 集中 到 使 用 HTML 格式 化 和 显示 数 
据 上 。 

XML 使 用 了 具有 语义 、 可 以 描述 数据 结构 的 标记 。XML 促使 了 文档 的 结构 化 ,所 有 
信息 按照 某 种 关系 排列 。 结 构 化 使 得 文档 各 个 部 分 紧密 相连 ,形成 一 个 整体 。 

【 例 9-1】 一 个 存储 了 歌曲 信息 的 XML 文档 。 

第 1 步 , 使 用 VS 2013 新 建 一 个 空 网 站 XMLWebsite, 添 加 新 项 ,选择 XML 文件 ,如 
图 9-1 所 示 ,命名 为 Ex9-1. xml。 

















4 Bs 法 排 密 据 ;| 了 KW 硬 了 ] 恒隆 次 宰 已 安生 机 (CH + 昌 Pp-| 
Vnsl als wcr Dat senice ss Visual cy 类 :Visual ce 
Visual C# 空白 XML 文件 
5 Wn @ wcrms Visual cs 
如 WcF 服务 ( 文 持 Na Visual cy 
[mi Web API Controller Class (v1) Visual C# 
”web AnL somata Visual cs 
和 图 web Es sm Visuel cy 
人 we xt Visual cs 
上 :vss Visual cs 
ee 
BB xsir x Visval Cs ~ 
闺 击 此 处 以 联机 并 章 演 樟 配 。 
各 称 (N): Ex9-Lxml ] 门 桂 f 现 才 在 单 疙 的 文件 中 [) 
DOD sO 
匡 硬 寺 


图 9-1 XML 文件 添加 


第 2 步 ,在 Ex9-1. xml 文件 中 添加 如 下 代码 : 


<?xml version= "1.0" encoding = "gb2312" ?> 
< 歌曲 集 > 
< 歌曲 > 
< 歌 名 > 康定 情歌 </ 歌 名 > 
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< 作词 > 李 依 若 </ 作 词 > 
< 演唱 者 > 张惠妹 </ 演 唱 者 > 
</ 歌 曲 > 
</ 歌 曲 集 > 
第 3 步 ,在 IE 浏览 器 中 打开 例 9-1 的 效果 ,如 图 9-2 所 示 。 
<3?xml version="1.0" encoding="gb2312”3> 
- < 歌曲 集 > 
- < 歌曲 > 
< 咎 名 > 康定 情 和 或 </ 息 名 > 
< 作词 > 李 依 车 </ 作 词 > 
< 演唱 考 > 张惠妹 </ 演唱 者 > 
</ 歌 曲 > 
< 殉 曲 集 > 


9-2 在 下 浏览 器 中 打开 XML 文档 的 效果 


在 例 9-1 的 XML 中 使 用 了 具有 语义 的 标记 ,如 < 歌 名 >、< 作 词 >、< 演 唱 者 > 等 。XML 的 
标记 也 描述 了 文档 的 数据 结构 ,< 歌曲 集 > 是 一 个 大 对 象 ,包含 了 若干 < 歌曲 > 元 素 ,每 个 < 歌 
曲 > 元 素 下 又 有 若干 子 元 素 , 用 于 存放 歌曲 的 歌 名 、 作 词 和 演唱 者 等 信息 。 

2. 元 标记 语言 

XML 是 一 种 元 标记 语言 。“ 元 标记 ”就 是 开发 者 可 以 根据 自己 的 需要 定义 自己 的 标 
记 。 满 足 任何 XML 命名 规则 的 名 称 都 可 以 作为 标记 。HTML 只 认识 已 经 定义 的 标记 ,如 
<HTML ><p> 等 ,不 认识 用 户 定义 的 标记 。 因 此 ,相对 于 HTML 而 言 ,XML 具有 良好 的 
可 扩展 性 。 这 里 的 标记 (tag) 又 称 为 元 素 名 ,也 称 为 标识 ,用 于 描述 数据 ,其 本 质 在 于 帮助 理 
解 文档 内 容 。 

3. 独立 于 平台 

XML 与 不 同 的 应 用 程序 ,不 同 的 操作 系统 .不同 的 硬件 环境 无 关 , 是 一 种 通用 的 数据 
格式 和 规范 ,可 以 在 Word 文档 和 Acrobat 之 间 ,或 数据 库 之 间 交 换 数据 。 

4. 良好 的 保值 性 

随 着 软件 的 更 新 和 升级 ,大 量 的 数据 文件 需要 配合 转换 ,容易 导致 文件 损坏 效率 降低 
等 问题 。 而 XML 可 以 方便 地 将 XML 文档 转换 为 其 他 格式 ,具有 良好 的 保值 性 。 





9.2 XML 标记 语法 


9.2.1 关于 标记 


XML 是 一 个 标记 语言 ,在 表示 数据 内 容 的 基础 上 ,插入 各 种 具有 明确 含义 的 标记 ,以 
起 到 对 数据 内 容 进行 解释 .说 明 、 限 制 等 作用 。 

1. XML 的 标记 必须 有 一 个 相应 的 结束 标记 

XML 中 有 两 种 标签 , 即 打 开标 签 和 关闭 标签 ,通常 也 被 称 为 开始 标签 “<” 和 结束 标签 
“>”, 如 < name > 是 一 个 标记 ,标记 名 为 name, 标 记 要 成 对 使 用 ,如 < name > 张 三 </name >。 

在 HTML 中 ,虽然 要 求 标签 元 素 成 对 出 现 ,但 经 常会 看 到 没有 关闭 标签 的 元 素 ,网 页 
同样 可 以 运行 。 在 HTML 中 ,没有 关闭 标签 的 元 素 如 下 所 示 。 


<p>This is a paragraph 
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<p>This is another paragraph 
但 是 在 XML 中 ,所 有 元 素 都 须 有 关闭 标签 ,省 略 关闭 标签 是 非法 的 。 


<p>This is a paragraph</p> 

<p> This is another paragraph</p> 

2. XML 的 标记 名 命名 规则 

(a) 名 称 的 开头 是 字母 或 下 夯 线 “-”, 不 能 用 XML 的 关键 字 作 为 开头 。 

(b) 标记 名 称 中 不 能 有 空格 。 

(c) 如 果 字 符 集 encoding 二 "utf-8" 或 "gb2312" ,名 称 的 字符 串 中 可 以 包含 字母 数字、 


9.2.2 标记 的 使 用 规则 


XML 有 严格 的 语法 限制 。 格 式 良好 的 XML 文档 是 没有 语法 错误 的 XML 程序 ,主要 
包含 以 下 10 条 。 

1. 必须 有 声明 语句 

XML 声明 是 XML 文档 的 第 一 句 。XML 声明 的 作用 是 告诉 浏览 器 或 者 其 他 处 理 程 序 
这 个 文档 是 XML 文档 。 其 格式 如 下 : 


<?xml version = "1.0" standalone = "yes/no" encoding = "UTF - 8"?> 


2. 注意 大 小 写 

在 XML 文档 中 ,大 小 写 是 有 区 别 的 。“<P>” 和 “<p >” 是 不 同 的 标记 。 注 意 : 写 元 素 
时 ,前 后 标记 的 大 小 写 要 保持 一 致 。 例 如 : < Author > TOM </Author >, 写 成 < Author > 
TOM </author > 是 错误 的 。 最 好 养 成 一 种 习惯 ,在 输入 标记 时 ,或 者 全 部 大 写 ,或 者 全 部 小 
写 ,或 者 第 一 个 字母 大 写 ,这样 可 以 减少 因为 大 小 写 不 匹配 而 产生 的 文档 错误 。 

3. XML 文档 有 且 只 有 一 个 根 元 素 

良好 格式 的 XML 文档 必须 有 一 个 根 元 素 , 也 就 是 紧 接 着 声明 后 面 建立 的 第 一 个 元 素 ， 
其 他 元 素 都 是 这 个 根 元 素 的 子 元 素 。 根 元 素 完全 包括 文档 中 其 他 所 有 的 元 素 。 根 元 素 的 起 
始 标 记 要 放 在 其 他 所 有 元 素 的 起 始 标 记 前 ; 根 元 素 的 结束 标记 要 放 在 其 他 所 有 元 素 的 结束 
标记 之 后 。 

4. 属性 值 使 用 引号 

与 HTML 类 似 ,XML 也 可 拥有 属性 (名 称 / 值 的 对 )。 在 HTML 代码 里 ,属性 值 加 不 
加 引号 都 可 以 。 例 如 :“< font color 二 red > word </font >” 和 “< font color 一 "red"> word 
</font>” 都 可 以 被 浏览 器 正确 解释 。 但 是 ,XML 中 规定 所 有 属性 值 必须 加 引号 (可 以 是 单 
引号 ,也 可 以 是 双 引 号 ,建议 使 用 双 引 号 ) ,否则 将 被 视 为 错误 。 

【 例 9-2】 一 个 错误 的 XML 文档 属性 表示 。 

第 1 步 ,在 XMLWebsite 项目 中 添加 XML 文件 新 项 ,命名 为 Ex9-2. xml。 

第 2 步 ,在 Ex9-2. xml 文件 中 添加 如 下 代码 : 

<?xml version= "1.0" encoding = "utf ~- 8" ?> 


<note date = 08/08/2008> 
<to> George </to> 
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< from > John </from> 
</note> 


第 3 步 ,VS 2013 检查 出 错误 ,如 图 9-3 所 示 。 


?xnl version="1.0” encoding="utf-8" ?> 
<note date=Q8/08/2008> 


革 ”5eorse 文档 根 级别 上 的 无 效 村 3 “Text” 
<from> John 和 


/pete> 


图 9-3 错误 信息 
第 4 步 ,正确 的 XML 文档 属性 表示 如 下 : 


<?xml version= "1.0" encoding = "utf - 8" ?> 
<note date = "08/08/2008"> 
<to> George </to> 
< from > John </from> 
</note> 


5. 所 有 的 标记 必须 有 相应 的 结束 标记 
在 HTML 中 ,标记 可 以 不 成 对 出 现 ,而 在 XML 中 ,所 有 标记 必须 成 对 出 现 ,有 一 个 开 
始 标 记 , 就 必须 有 一 个 结束 标记 ,否则 将 被 视 为 错误 。 
6. 所 有 的 空 标 记 也 必须 被 关闭 
空 标记 就 是 标记 对 之 间 没 有 内 容 的 标记 。 空 标记 指 的 是 标记 只 有 开始 ,没有 结束 ,又 称 
为 孤立 标记 。 这 种 标记 有 的 表示 一 种 格式 信息 ,如 < hr > 在 HTML 中 代表 了 一 条 水 平 线 。 
空 标记 可 写成 “< 标记 名 />” 的 形式 。 在 XML 中 ,规定 所 有 的 标记 必须 有 结束 标记 。 
【 例 9-3】 一 个 空 标记 的 XML 文档 。 
第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-3. xml。 
第 2 步 ,在 Ex9-3. xml 文件 中 添加 如 下 代码 : 
<?xml version = "1.0" encoding = "utf -8" ?> 
< student ID = "NO001"> 
<name> 张 三 </name> 
<sex> 男 </sex> 
<birthday > 1978.05.12 </birthday> 
< score> 92 </score> 
< skill /> <! -- 这 里 是 空 标记 --> 
</student > 
7. 标记 必须 正确 谋 套 
标记 之 间 不 得 交叉 。 在 HTML 文件 中 ,可 以 这 样 写 : 
<B><H> Today is Saturday. </B></H> 
<B> 和 < H > 标记 之 间 有 相互 重 倒 的 区 域 .而 XML 严格 禁止 标记 交错 ,标记 必须 以 规 
则 性 的 次 序 出 现 。 


8. 特殊 字符 的 实体 引用 
在 XML 中, 一些 字符 拥有 特殊 的 意义 。 如 果 把 字符 “<” 放 在 XML 元 素 中 ,会 发 生 错 
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误 ,这 是 因为 解析 器 会 把 它 当 作 新 元 素 的 开始 。 如 : 


<message> if salary < 1000 then </message> 


会 产生 XML 错误 ,为 了 避免 这 个 错误 ,请 用 实体 引用 来 代替 “<” 字 符 : 


<message> if salary &lt; 1000 then </message> 
在 XML 中 ,有 5 个 预定 义 的 实体 引用 , 见 表 9-1。 
表 9-1 XML 中 预定 义 的 实体 引用 

















导 谋 








预 定 义 字 符 含义 
&lt; < 小 于 
& gt > 大 于 
Bamp; & 和 号 
Bapos; 单 引号 
&quot; 和 引号 
注 ; 在 XML 中 ,只 有 字符 “<” 和 “&.” 确 实 是 非法 的 。 大 于 号 是 合法 的 ,但 是 用 实体 引用 来 代替 它 是 一 个 好 习惯 。 


9. XML 中 的 空格 

HTML 会 把 多 个 连续 的 空格 字符 删 减 (合并 ) 为 一 个 
HTML: Hello my nameis David. 

输出 : 

Hello mynameis David. 


在 XML 中 ,文档 中 的 空格 不 会 被 删 减 。 

10. XML 中 的 回 车 换行 

在 Windows 应 用 程序 中 ,换行 通常 以 一 对 字符 来 存储 : 回 车 符 (CR) 和 换行 符 (LF)。 
这 对 字符 与 打字 机 设置 新 行 的 动作 有 相似 之 处 。 而 Macintosh 应 用 程序 使 用 CR 来 存储 新 
。XML 与 UNIX 类 似 ,都 是 以 LF 字符 存储 换行 。 

【 例 9-4】 一 个 结构 完整 和 格式 良好 的 XML 文档 。 

第 1 步 ,在 XMLWebsite 项目 中 添加 XML 文件 新 项 ,命名 为 Ex9-4. xml。 

第 2 步 ,在 Ex9-4. xml 文件 中 添加 如 下 代码 : 


<?xml version= "1.0" encoding = "utf ~ 8" standalone = "no" ?> 
<?xml — stylesheet type = "text/xsl" href = "show_student. xsl" ?> 
<! DOCTYPE roster SYSTEM "student. dtd"> 
<! -- 此 处 为 注释 信息 --> 
<roster> 
< student ID= "N101"> 

<name > 李 华 </name> 

<sex> 男 </sex> 

<birthday > 1978. 05.12 </birthday > 

< score> 92 </score> 

<skill> 

此 学 生 爱 好 编程 , 以 下 是 他 编写 的 代码 
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<![CDRTR[ 
< Script> 
function fl(a,b){ 
if (name= "cai" && a<0) 
{return1} 
else 
{return 0} 
} 
</script > 
]]> 
</skill> 
</student > 
< student ID = "NO002"> 
< name > 李 四 </name > 
< sex> 女 </sex> 
<birthday > 1979.05.12 </birthday> 
< score> 89 </score> 
< skill > Visual Basic &amp; c# </skill> 
</student > 
</roster > 


第 3 步 ,良好 格式 的 XML 文档 说 明 如 图 9-4 所 示 。 


文 
件 | 
头 


一 一 XML 启明 
一 预 处 理 指 令 


<2xml version="1.0" encoding="UTF-8" standalone="no"?> 一 
<?xml-stylesheet type="text/xsl" href="show_student.xs|"?>—— 
<IDOCTYPE roster SYSTEM "studentdtd"> 、、 





<!-- 此 处 为 注释 信息 --> ~ Te 
<roster> sa 一 一 文档 米 弄 ,时 
根 元 素 -| <student ID="n191. 一 注释 义 档 类 型 ,i 明 
元 素 4 Jname> . 
元 素 /<sex> 央 Tex> 一 一 一 文本 
人 <birthday>1978.9.12</blrthday> 
属性 ”<score>92</score> 
<skill> 此 字 生 脸 好 帝 种 ， 以 下 旦 它 病 的 代码 
<![CDATAI 一 一 _ 
档 <script> CDATA 
先 function f1(a,b) { 
上 if(name="cai"& Ba < 0) 
素 freturn 1) 
else 
{return 0} 
} 
</script> 
])> </skill> 
<skill>Visual BasicCSBmPD C#</skill> 
de Cpc 
</roster> 实体 


图 9-4 良好 格式 的 XML 文档 说 明 


9.3 XML 文档 结构 


一 个 XML 文件 通常 包含 文件 头 和 文件 体 两 部 分 。XML 文件 头 由 XML 声明 与 DTD 
文件 类 型 声明 组 成 ,文件 体 中 包含 的 是 XML 文件 的 内 容 ,XML 元 素 是 XML 文件 内 容 的 基 
本 单元 。 一 般 地 ,XML 文档 结构 包括 声明 注释、 文档 类 型 声明 、 处 理 指令 、 元 素 、 属 性 、 实 
体 .CDATA 组 成 部 分 。 
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9.3.1 XML 文档 声明 


文档 声明 是 XML 必 不 可 少 的 ,以 声明 这 个 文档 是 XML 文档 。 声 明 从 XML 文档 的 第 
一 行 第 一 个 字符 开始 ,前 面 不 能 有 任何 东西 。 如 请 句 : 


<?xml version= "1.0" encoding = "utf — 8" standalone = "no" ?> 


就 是 一 个 XML 处 理 指令 。 处 理 指令 以 “<?” 开 始 ,以 “? >” 结 束 。“<?” 后 的 第 一 个 单词 是 指 
令 名 ,如 代表 XML 声明 的 xml 指令 。 

version standalone encoding 是 由 等 号 分 开 的 三 个 名 称 / 数 值 对 特性 ,等 号 左边 是 特性 
名 称 ,等 号 右边 是 特性 的 值 ,用 引号 引起 来 。 

version: 说 明 这 个 文档 所 遵循 的 版 本 号 ,version 二 "1.0" 表 示 这 个 文档 符合 XML 的 
1.0 版 本 的 规范 。 

standalone: 说 明文 档 在 这 个 文件 里 是 否 还 需要 从 外 部 导入 ,此 值 为 yes 说 明 所 有 文档 
都 在 这 一 个 文件 里 完成 ,否则 还 需要 其 他 文件 。 

encoding: 指 文档 字符 编码 ,常见 的 字符 集 有 ASCII、 ANSI、 GB2312、 BIG5、GBK、 
GB18030、UTF-8 等 。 

文档 类 型 声明 <!1DOCTYPE[]> 紧 随 XML 声明 之 后 ,包括 所 有 实体 的 声明 ,如 : 


<?xml version = "1.0" encoding = "gb2312"?> 
<! DOCTYPE movies SYSTEM "movies. dtd"> 


9.3.2 XML 根 元 素 定 义 


XML 文档 的 树 形 结构 要 求 必须 有 一 个 根 元 素 。 根 元 素 的 起 始 标 记 要 放 在 所 有 其 他 元 
素 起 始 标记 之 前 , 根 元 素 的 结束 标记 应 放 在 其 他 所 有 元 素 的 结束 标记 之 后 。 

【 例 9-5】 XML 文档 的 根 元 素 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-5. xml。 

第 2 步 , 在 Ex9-5. xml 文件 中 添加 如 下 代码 : 

<?xml version = "1.0" encoding = "UTF ~ 8" standalone = "yes" ?> 

<Settings> 

< Person> Zhang San </Person > 

</Settings > 

XML 文档 必须 有 根 标记 且 只 能 是 唯一 的 标记 。XML 文档 必须 有 一 个 元 素 是 所 有 其 
他 元 素 的 父 元 素 ,该 元 素 称 为 根 元 素 。 





<root> 
<child> 
< subchild>..... </subchild> 
</child> 
</root> 


【 例 9-6】 根 标记 不 唯一 的 XML 文档 ,有 < student > 和 </student > 两 个 根 元 素 。 
第 1 步 . 在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-6. xml。 
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第 2 步 , 在 Ex9-6. xml 文件 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "gb2312"> 
< student ID = "NO001"> 

<name> 张 三 </name> 

< sex> 男 </sex> 

<birthday> 1978. 05.12 </birthday> 

< score> 92 </score> 


< skill > Java </skill> Nm wersaomr iu encoaang= occ 
éstudent ID=“NO001"> 
</student > Snane) 张 三 Cnane>》 
i <sez> 男 </ sex> 
< student ID = "NO002"> bizthdayy1978. 05. 12¢/birthdayy 
Cscore)g2d/ scorey 
<name> 李 四 </name> <skill>Java </skill> 
< sex> 女 </sex> J ee 





<birthday > 1979.05.12 </birthday> 





< score> 89 </score> Dirthday > ToT. DE. 
《score>89</scorey 
< skill > Visual Basic &amp; c# </skill> <skill>Visual Basic amp; c# </skill> 
/studant> 
</student > 
图 9-5 错误 信息 


第 3 步 , 提 出 错误 信息 ,如 图 9-5 所 示 。 
9.3.3 XML 元 素 和 注释 
元 素 的 基本 结构 由 开始 标记 、 数 据 内 容 、 结 束 标记 组 成 ,如 


<Person> 
<Name > Zhang San </Name > 
< Sex> Male </Sex> 
</Person> 
在 XML 中 编写 注释 的 语法 与 在 HTML 中 编写 注释 的 请 法 很 相似 ,与 文档 结构 或 编辑 有 关 
的 说 明 等 并 非 用 于 XML 分 析 器 的 内 容 可 以 包含 在 注释 中 。 注 释 以 <! 一 一 开始 ,并 以 一 一 > 结 
束 , 例 如 


<! -- catalog last updated 2017 -7— 01 一 一 >. 

XML 中 的 注释 需要 注意 的 是 ,注释 中 不 要 出 现 * 一 一 ”或 “一 ”, 注 释 不 要 放 在 标记 中 ， 
不 能 嵌 套 。 
9.3.4 PI 

处 理 指 令 (Processing Instruction, PT) 以 “<?” 开 头 , 以 “?>” 结 束 , 用 来 给 下 游 的 文档 传 
递 信息 。 

<?xml: stylesheet href = "core. CSS" type = "text/CSS"?> 
表明 这 个 XML 文档 用 core. CSS 控制 显示 。 

1. #PCDATA 


PCDATA 在 元 素 类 型 声明 中 ,将 元 素 的 类 型 声明 为 # PCDATA .表示 该 元 素 的 内 容 
是 可 解析 的 字符 数据 ,不 能 在 该 元 素 下 包含 子 类 。 由 于 (#PCDATA) 的 内 容 也 需要 XML 
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解析 器 来 解析 ,所 有 仍然 需要 转换 >、<、&、'、" 这 5 个 特殊 字符 ,所 以 > 要 写成 & gt; 才 不 会 
出 错 。 

【 例 9-7】 举例 说 明 PCDATA 的 用 法 ,其 中 Ex9-7. xml 存储 电影 内 容 数据 ,movies. 
dtd 对 movies. xml 进行 验证 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 文本 文件 新 项 ,对 话 框 如 图 9-6 所 示 , 命 名 为 


movies. dtd。 
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bn 6 exe Visual cs 上 
文 村 机 版 Visual C# 
上 四] “EF Visual C# 
有 
国 Fexse Visual cs 
关 安 地 图 Visual ce 
加 资源 广 伯 Visual C# 
[二 序列 图 Visual Ce 
A 
fi(N); Es 门将 代 台 主轴 的 文件 地) 
Dm 
IE | Ww | 


9-6 ”基于 文本 文件 的 dtd 添加 
第 2 步 , 在 movies. dtd 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "GB2312"?> 
<! ELEMENT movies (id, name, brief, time)> 

<! ATTLIST movies type CDATA # REQUIRED> 

<! ELEMENT id ( #PCDATA)> 

<! ELEMENT name( # PCDATA)> 

<!ELEMENT brief (##PCDATA)> 

<! ELEMENT time ( #PCDATA)> 


其 中 ,id、name、brief 和 time 只 能 包含 非 标 记 文 本 (不 能 有 自己 的 子 元 素 ) 。 
第 3 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,XML 文件 命名 为 Ex9-7. xml。 


<?xml version = "1.0" encoding = "gb2312"?> 
<!DOCTYPE movies SYSTEM "movies. dtd"> 
<movies type = "动作 片 "> 

<id>1</id> 

< name > 致命 摇篮 </name > 

<brief > 李连杰 最 新 力作 </brief > 

<time> 2003 </time> 


</movies> 
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2. CDATA 
CDATA 用 于 需要 把 整 段 文本 解释 成 纯 字 符 数据 ,而 不 是 标记 的 情况 。 当 一 些 文本 中 
包含 很 多 “<”“>”&.” 等 字符 而 非 标记 时 ,CDATA 会 非常 有 用 。 
【 例 9-8〗 CDATA 使 用 实例 。 
第 1 步 , 在 XMLWebsite 项目 中 添加 XML 文件 新 项 ,命名 为 Ex9-8. xml。 
第 2 步 ,在 Ex9-8. xml 文件 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf - 8" ?> 
< people> 
<![CDATA[<! --! 和 [之 间 不 要 有 空白 --> 
< teacher > 
< name > Androidyue </name > 
< sex> Boy</sex> 
<age>22</age> 
<add> gaddress;</add> 
</techer > 
]]> 
</people> 


以 “<! [CDATAL" 开 始 ,以 *]]>?” 结 束 。 注 意 ,在 CDATA 段 中 不 要 出 现 结束 定 界 符 
“1 


9.4 命名 空间 


当 建 立 XML 应 用 的 时 候 , 要 规定 可 用 的 元 素 , 有 时 两 个 同名 的 元 素 在 不 同 的 地 方 有 不 
同 的 含义 ,这 就 需要 指定 命名 空间 来 避免 冲突 。 在 XML 中 ,采用 全 球 唯一 的 域名 作为 
Namespace, 即 用 URL 作为 Namespace。 

【 例 9-9】 Namespace 的 实例 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-9. xml。 

第 2 步 ,在 Ex9-9. xml 文件 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf -8" ?> 
<c:customer xmlns:c = "http://www.customer.com/"> 
< ciname > ZhangSan </c:name> 
< c:phone > 09098768 </c:phone> 
< c:host xmlns:e= "http://www.employee. com/"> 
<e:name>LiSi</e:name> 
<e:phone> 89675412 </e:phone> 
</c:host> 
</c:customer > 


例 9-9 定义 了 两 个 命名 空间 , 即 c: 和 e:。 定 义 元 素 时 ,前 面 都 加 了 特定 的 前 级 ,这 样 就 
能 区 别 出 哪 个 是 客户 的 姓名 、 电 话 , 哪 个 是 职工 的 姓名 、 电 话 。 
命名 空间 的 定义 语法 如 下 : 


xmlns:[prefix] = " [URI of namespace] " 
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其 中 ,xmlns: 是 必需 的 , 它 是 XML 的 关键 字 ; prefix 是 命名 空间 的 别名 。 命 名 空间 也 可 以 
在 父 元 素 中 指明 ,这样 可 以 避免 在 每 个 子 元 素 中 都 去 指定 命名 空间 。 如 果 指 定 了 父 元 素 的 
命名 空间 , 子 元 素 还 希望 用 自己 的 命名 空间 ,可 以 在 子 元 素 中 指定 命名 空间 的 别名 。 

【 例 9-10】 父 元 素 和 子 元 素 命名 空间 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-10. xml。 

第 2 步 ,在 Ex9-10. xml 文件 中 添加 如 下 代码 : 

<?xml version = "1.0" encoding = "utf — 8" ?> 

< book xmlns:1ib= "http://www. library. com/"> 

<1ib:title> The C++Standard Library </lib:title> 


<1ib:author > Nicolai M. Josutis </lib:author > 
</book> 


第 3 步 ,在 XMLWebsite 项目 中 添加 XML 文件 新 项 ,命名 为 Ex9-11. xml。 
第 4 步 , 在 Ex9-11. xml 文件 中 添加 如 下 如 下 代码 : 
<?xml version = "1.0" encoding = "utf 一 8”?> 

< book xmlns = "http://www. library. com/"> 

<title> The C++Standard Library </title> 

<author > Nicolai M. Josutis </author > 

</book > 
第 5 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-12. xml。 
第 6 步 ,在 Ex9-12. xml 文件 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf ~- 8" ?> 
< customer xmlns = "http://www. customer. com/" 
xmlns:e= "http://www. employee. com/"> 
<name> ZhangSan </name > 
< phone > 09098768 </phone > 
<host> 
<e:name> LiSi </e:name> 
< e:phone> 89675412 </e:phone> 
</host > 
</customer > 


9.5 XML 架构 与 模式 


在 所 有 的 XML 技术 中 ,XML 架构 对 软件 开发 人 员 最 具 价 值 ,因为 是 它 最 终 使 在 XML 
文档 中 加 入 类 型 信息 成 为 可 能 。XML 架构 之 前 ,XML 1.0 规范 附带 了 一 个 描述 XML 词 
汇 的 内 置 语法 ,该 语法 被 称 为 文档 类 型 定义 (Document Type Definition,DTD)。 尽 管 DTD 
非常 适合 很 多 基于 SGML 的 电子 出 版 应 用 程序 ,但 当 应 用 到 诸如 围绕 当今 Web 应 用 的 现 
代 软 件 开发 领域 时 ,其 局 限 性 很 快 就 显现 出 来 了 。 

首先 ,DTD 的 主要 限制 是 DTD 语法 和 XML 不 兼容 ,而 且 DTD 不 支持 命名 空间 、 典 型 
编程 语言 数据 类 型 或 定义 自 定义 类 型 。 

其 次 ,由 于 DTD 语法 本 身 不 是 XML, 所 以 不 能 使 用 标准 的 XML 工具 来 程序 化 地 处 理 
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这 些 定义 。 大 多 数 XML 1. 0 处 理 器 虽然 支持 DTD 验证 ,但 由 于 语法 的 复杂 性 , 它 不 支持 
对 DTD 中 找到 的 信息 进行 程序 化 访问 。 

再 次 ,DTD 也 是 专门 为 以 文 挡 为 中 心 的 系统 而 设计 的 ,在 这 种 系统 中 通常 不 存在 程序 
化 数据 类 型 。 

最 后 ,DTD 类 型 的 系统 是 不 可 以 扩展 的 。 

为 此 ,W3C 提出 了 一 种 新 的 解决 方案 来 定义 XML 文档 结构 ,内容 和 语法 , 即 XML 模 
式 或 架构 。 


9.5.1 XML 架构 概述 


XML 架构 本 身 是 一 个 用 于 描述 XML 实例 文档 的 XML。 之 所 以 使 用 “实例 ”一 词 ,是 
因为 一 个 架构 会 描述 一 类 文档 ,这 类 文档 会 有 许多 不 同 的 实例 。 这 类 似 于 现在 面向 对 象 系 
统 中 类 和 对 象 之 间 的 关系 。 类 相对 于 架构 ,对 象 相对 于 XML 文档 。 因 此 ,在 使 用 XML 架 
构 时 (文件 后 缀 为 xsd) ,通常 要 使 用 不 止 一 个 文档 ,还 有 架构 以 及 一 个 或 多 个 XML 实例 
文档 。 

架构 定义 中 使 用 的 元 素来 自 http://www. w3. org/2001/XMLSchema 命名 空间 。 架 
构 定 义 必须 具有 一 个 根 xsd: schema 元 素 , 各 种 元 素 都 可 能 嵌 套 在 xsd: schema 中 ,包括 但 
不 限于 xsd: element、xsd: attribute 和 xsd: complexType。 

置 于 xsd: schema 元 素 中 的 定义 会 自动 与 targetNamespace 属性 中 指定 的 命名 空间 相 
关联 。XML 架构 还 提供 了 schemaLocation 属性 ,用 于 在 实例 文档 中 提供 关于 所 需 架 构 定 
义 位 置 的 提示 。schemaLocation 属性 位 于 http: //www. w3. org/2001/XMLSchema- 
instance 命名 空间 中 ,该 命名 空间 是 专门 为 只 在 实例 文档 中 使 用 的 属性 而 保留 的 。 
targetNamespace 是 一 个 XML 的 schema 中 的 概念 ,假设 定义 1 个 schema: 

< xs: Schema xmlns:xs = "http://www.w3.org/2001/XMLSchema " 

targetNamespace = "http://a.name/space "> 

<xs:element name = "address " type= "xs:string" /> 

</xs:schema> 
那么 , 它 表 示 的 意思 是 address 这 个 元 素 是 属于 “http://a. name/space ”命名 空间 的 。 如 果 
不 指定 targetNamespace, 就 不 知道 address 属于 什么 命名 空间 , 它 肯 定 不 属于 “http:// 
www. w3. org/2001/XMLSchema” 命 名 空间 。 指 定 这 个 定义 以 后 ,就 能 让 定义 的 schema 中 
的 元 素 都 有 自己 的 命名 空间 。 这 个 命名 空间 都 是 自己 定义 的 。targetNamespace 一 
“http://a. name/space ”就 是 为 自己 定义 的 元 素 定义 了 一 个 包 , 也 就 是 package 的 概念 ,这 
个 元 素 是 这 个 package( 命 名 空间 ) 里 的 ,在 别 的 XML 文件 里 面 可 以 用 < xs: schema xmlns:s 一 
“http://a. name/space”/> 来 引用 前 面 定义 的 元 素 ,这 里 相当 于 import 的 概念 。 

元 素 和 属性 分 别 使 用 xsd: element 和 xsd: attribute 元 素 定义 为 targetNamespace 的 
一 部 分 。XML 架构 能 够 用 在 xsd: element 声明 中 嵌 套 xsd: complexType 元 素 的 类 似 方式 
来 定义 元 素 内 容 模型 。 在 XML 架构 中 ,通过 一 个 排序 元 素 指 定 内 容 模型 的 特征 , 它 被 作为 
xsd: complexType 元 素 的 子 级 进行 嵌 套 。 

< xsd:element > 声明 一 个 元 素 。 
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【语法 】 


< element 
abstract = Boolean: false 
block = (#all | List of (extension | restriction | substitution)) 
default = string 
final = (#all | List of (extension | restriction)) 
fixed = string 
form = (qualified | unqualified) 
id = JID 
maxOccurs = (nonNegativeInteger | unbounded): 1 
minOccurs = nonNegativeInteger: 1 
name= NCName 
nillable = Boolean: false 
ref = QName 
substitutionGroup = QName 
type = QName 
{any attributes with non - schema Namespace}...> 
Content: (annotation?, ((simpleType | complexType)?, (unique | key | 
keyref) * )) 
</element > 


可 选项 abstract, 表 示 在 实例 文档 中 是 否 可 以 使 用 复杂 类 型 。 如 果 该 值 为 True, 则 元 素 
不 能 直接 使 用 该 复杂 类 型 ,而 是 必须 使 用 从 该 复杂 类 型 派生 的 复杂 类 型 。 默 认 值 为 False。 

可 选项 block ,防止 具有 指定 派生 类 型 的 复杂 类 型 被 用 来 替代 该 复杂 类 型 。 该 值 可 以 包 
含 #all 或 者 一 个 列表 ,该 列表 是 extension 或 restriction 的 子 集 。extension 防止 通过 扩展 
派生 的 复杂 类 型 被 用 来 替代 该 复杂 类 型 。restriction 防止 通过 限制 派生 的 复杂 类 型 被 用 来 
替代 该 复杂 类 型 。#all 防止 所 有 派生 的 复杂 类 型 被 用 来 替代 该 复杂 类 型 。 

可 选项 default ,表示 如 果 元 素 内 容 是 简单 类 型 或 者 元 素 内 容 是 textOnly, 则 为 元 素 的 
默认 值 。fixed 和 default 属性 相互 排斥 。 如 果 元 素 包含 简单 类 型 , 则 该 值 必须 是 该 类 型 的 
有 效 值 。 

可 选项 substitutionGroup ,可 用 来 替代 该 元 素 的 名 称 。 该 元 素 必 须 具 有 相同 的 类 型 或 
为 从 指定 元 素 类 型 派生 的 类 型 。 如 果 引 用 的 元 素 是 在 全 局 级 别 声明 的 ( 父 元 素 是 schema 
元 素 ), 则 可 以 在 任何 元 素 上 使 用 该 属性 。 该 值 必须 是 QName。 

可 选项 final 表示 派生 的 类 型 。final 属性 防止 simpleType 元 素 派生 新 的 类 型 。 该 值 可 
以 包含 #all 或 者 一 个 列表 ,该 列表 是 list、union 或 restriction 的 子 集 , 含 义 见 表 9-2。 

可 选项 fixed, 表 示 如 果 元 素 的 内 容 是 简单 类 型 或 其 内 容 是 textOnly, 则 为 该 元 素 的 预 
确定 的 、 不 可 更 改 的 值 。fixed 和 default 属性 相互 排斥 。 


表 9-2 final 属性 的 几 种 取 值 

















取 值 含 义 
list 防止 通过 列表 派生 
union 防止 通过 联合 派生 
restriction 防止 通过 限制 派生 
#all 防止 所 有 派生 (列表 、 联 合 、 限 制 ) 
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可 选项 form, 表示 该 元 素 的 形式 。 默 认 值 是 包含 该 属性 的 schema 元 素 的 
elementFormDefault 属性 的 值 。 该 值 必须 是 下 列 字 符 串 之 一 : qualified 或 unqualified。 如 
果 该 值 是 非 限定 的 , 则 无 须 通过 命名 空间 前 绥 限 定 该 元 素 。 如 果 该 值 是 限定 的 , 则 必须 通过 
命名 空间 前 级 限定 该 元 素 。 

可 选项 maxOccurs, 表 示 序 列 可 出 现 的 最 大 次 数 。 该 值 可 以 是 大 于 或 等 于 零 的 整数 。 
若 不 想 对 最 大 次 数 设置 任何 限制 ,请 使 用 字符 串 "unbounded" 。 

可 选项 minOccurs, 表 示 序 列 可 出 现 的 最 小 次 数 。 该 值 可 以 是 大 于 或 等 于 零 的 整数 。 
若 要 指定 该 序列 组 是 可 选 的 ,请 将 此 属性 设置 为 零 。 

可 选项 nillable, 一 个 指示 符 ,指示 是 否 可 以 将 显 式 的 零 值 分 配给 该 元 素 。 此 项 应 用 于 
元 素 内 容 , 并 且 不 是 该 元 素 的 属性 ,默认 值 为 False。 如 果 nillable 为 True, 则 该 元 素 的 实例 
可 以 将 nill 属性 设置 为 True。 

可 选项 ref, 表 示 在 此 架构 (或 者 由 指定 命名 空间 指示 的 其 他 架构 ) 中 声明 的 元 素 的 名 
称 。ref 值 必须 是 QName。ref 可 以 包含 命名 空间 前 级 。 如 果 包 含 元 素 为 schema, 则 会 被 
禁止 。 如 果 ref 属性 出 现 , 则 complexType、 simpleType、key、keyref 和 unique 元 素 以 及 
nillable default ,fixed、form、block 和 type 属性 不 能 出 现 。 

可 选项 type, 表 示 内 置 数据 类 型 的 名 称 , 或 者 是 在 此 架构 (或 者 由 指定 命名 空间 指示 的 
其 他 架构 ) 中 定义 的 simpleType 或 complexType 元 素 的 名 称 。 提 供 的 值 必须 与 引用 的 
simpleType 或 complexType 元 素 上 的 name 属性 相对 应 。type 和 ref 属性 是 互相 排斥 的 。 

【 例 9-11】 包含 两 个 元 素 ,这 两 个 元 素 可 以 彼此 替代 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,如 图 9-7 所 示 , 命 名 为 Ex9- 
L189;.x5d; 
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9-7 XML 架构 的 添加 
第 2 步 ,在 Ex9-13. xsd 中 添加 如 下 代码 : 
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<?xml version = "1.0" encoding = "utf - 8"?> 

< xs:schema id= "Exg 13" 
targetNamespace = "http://tempuri. org/Ex9 13.xsd" 
elementForm Default = "qualified" 
xmlns = "http://tempuri. org/Ex9_13. xsd" 
xmlns:mstns = "http://tempuri. org/Ex9_13. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema"> 

<xs:element name = "cat" type = "xs:string"/> 

<xs:element name = "dog" type= "xs:string"/> 

<xs:element name = "redDog" type = "xs:string" 
substitutionGroup = "dog" /> 

<xs:element name = "brownDog" type= "xs:string" 
substitutionGroup = "dog" /> 

<xs:element name = "pets"> 

<xs:complexType> 
<xs:choice minOccurs = "0" maxOccurs = "unbounded"> 
<xs:element ref = "cat"/> 
<xs:element ref = "dog"/> 
</xs:choice> 
</xs:complexType> 
</xs:element > 
</xs:schema> 


9.5.2 XML 架构 数据 类 型 


XML 架构 定义 了 一 组 内 置 数据 类 型 ,可 用 于 约束 纯 文 本 元 素 和 属性 的 内 容 。 每 个 数 
据 类 型 具有 一 个 显 式 定义 的 值 空 间 和 一 个 显 式 定 义 的 词法 空间 。 基 于 命名 空间 http:// 
www. w3. org/2001/XMLSchema 和 http://www. w3. org/2001/ XMLSchema-instance 的 
数据 类 型 包括: string、duration、datetime、gYear、gMonth、gDay、gYearMonth、 
gMonthDay、 Boolean、 base64Binary、 hexBinary、 decimal, float double、 QName 、anyURI、 


NOTATION 。 


9.5.3 simpleType 


< xsd:simpleType > 元 素 定义 一 个 简单 类 型 ,确定 与 具有 纯 文 本 内 容 的 属性 或 元 素 的 值 


有 关 的 信息 以 及 对 它们 的 约束 。 
【语法 】 


< simpleType 

final = (#all | (list | union | restriction)) 

= DD 

name = NCName 

{any attributes with non - schema Namespace}. . .> 
Content: (annotation?, (restriction | list | union)) 
</simpleType > 


可 选项 id 表示 该 元 素 的 ID,id 值 必须 属于 类 型 ID 并 且 在 包含 该 元 素 的 文档 中 是 唯 
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一 的 。 

name 表示 类 型 名 称 , 该 名 称 必须 是 在 XML 命名 空间 规范 中 定义 的 无 冒号 名 称 
(NCName) 。 如 果 指 定 , 该 名 称 在 所 有 simpleType 和 complexType 元 素 之 间 必 须 是 唯一 
的 。 如 果 simpleType 元 素 是 schema 元 素 的 子 元 素 , 则 为 必 选 项 ,在 其 他 时 候 是 不 允许 的 。 

可 以 使 用 restriction \list 和 union 定义 简单 类 型 元 素 。 

【 例 9-12】 使 用 Restriction 定义 一 个 简单 类 型 将 整数 值 限制 在 最 小 值 0 和 最 大 值 100 


的 范围 内 。 
第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,命名 为 Ex9-14. xsd。 


第 2 步 , 在 Ex9-14. xsd 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf - 8"?> 
< xs:schema id= "Ex9_14" 
targetNamespace = "http://tempuri. org/Ex9 14.xsdn" 
elementForm Default = "qualified” 
xmlns = "http://tempuri. org/Ex9_14. xsd" 
xmlns:mstns = "http://tempuri. org/Ex9_14. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema" 
> 
<xs:simpleType name = "freezeboilrangeInteger"> 
<xs:restriction base = "xs: integer"> 
<xs:minInclusive value = "0"/> 
<xs:maxInclusive value = "100"/> 
</xs:restriction> 
</xs:simpleType > 
</xs:schema> 


【 例 9-13】〗 使 用 list 定义 简单 类 型 (listOfDates) ,允许 将 日 期 列表 (每 个 列表 项 日 期 必 


须 通过 空白 分 隔 ) 作 为 其 内 容 。 
第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,命名 为 Ex9-15. xsd。 
第 2 步 , 在 Ex9-15. xsd 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf 一 8"?> 
<xs:schema id = "Ex9 15" 
targetNamespace = "http://tempuri. org/Ex9_15. xsd" 
elementForm Default = "qualified" 
xmlns = "http://tempuri. org/Ex9_15. xsd" 
xmlns:mstns = "http://tempuri. org/Ex9_15. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema"> 
<xs:simpleType name = "listOfDates"> 
<xs:list itemType = "xs:date"/> 
</xs:simpleType> 
</xs: schema > 


【 例 9-14】 使 用 union 定义 简单 类 型 (allframesize) ,作为 两 个 其 他 简单 类 型 的 联合 ， 
义 枚 举 值 组 ; 一 组 枚 举 值 通 过 一 组 整数 值 提供 公路 自行 车 的 尺寸 , 另 一 组 枚 举 值 枚 举 山地 
自行 车 尺寸 的 字符 串 值 (如 large.medium small) 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,命名 为 Ex9-16. xsd。 
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第 2 步 ,在 Ex9-16. xsd 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf — 8"?> 
<xs:schema id= "Ex9 16" 
targetNamespace = "http://tempuri. org/Ex9_16.xsd" 
elementForm Default = "qualified" 
xmlns = "http://tempuri. org/Ex9_16. xsd" 
xmlns:mstns = "http://tempuri. org/Ex9_16. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema" 
> 
<xs:attribute name = "allframesize"> 
<xs:simpleType> 
<xs:union> 
<xs:simpleType> 
<xs:restriction base = "roadbikesize"/> 
</xs:simpleType > 
<xs:simpleType> 
<xs:restriction base = "mountainbikesize"/> 
</xs:simpleType> 
</xs:union> 
</xs: simpleType> 
</xs:attribute > 


<xs:simpleType name = "roadbikesize"> 
<xs:restriction base = "xs:positiveInteger"> 
<xs:enumeration value = "46"/> 
<xs:enumeration value = "52"/> 
<xs:enumeration value = "55"/> 
</xs:restriction> 
</xs:simpleType > 


<xs:simpleType name = "mountainbikesize"> 
<xs:restriction base = "xs:string"> 
<xs:enumeration value = "small"/> 
<xs:enumeration value = "medium"/> 
<xs:enumeration value = "large"/> 
</xs:restriction> 
</xs:simpleType> 
</xs: schema > 


9.5.4 complexType 


complexType 元 素 用 于 定义 复杂 类 型 。 复 杂 类 型 的 元 素 是 包含 其 他 元 素 和 /或 属性 的 
XML 元 素 。 

【 话 法 】 

< complexType 

id= ID 

nanme = NCName 

abstract = true|false 
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mixed = true| false 
block = (#all|1list of (extension|restriction)) 
final = (#all|list of (extension|restriction)) 
any attributes> 
(annotation?, (simpleContent|complexContent|( (grouplalll| 
choice| sequence)?, ( (attribute|attributeGroup) * ,anyAttribute?)))) 


</complexType> 
其 中 ? 符号 声明 在 complexType 元 素 中 ,元 素 可 出 现 零 次 或 一 次 , * 符号 声明 元 素 可 出 现 


可 选项 mixed 规定 是 否 允 许字 符 数据 出 现在 该 复杂 类 型 的 子 元 素 之 间 , 默认 值 为 
False。 如 果 simpleContent 元 素 是 子 元 素 , 则 不 允许 mixed 属性 。 如 果 complexContent 元 
素 是 子 元 素 , 则 该 mixed 属性 可 被 complexContent 元 素 的 mixed 属性 重 写 。 

【 例 9-15】 一 个 名 为 note 的 复杂 类 型 元 素 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,命名 为 Ex9-17. xsd。 

第 2 步 ,在 Ex9-17. xsd 中 添加 如 下 代码 : 


<?xml version= "1.0" encoding = "utf - 8"?> 
<xs:schema id= "Ex9_17" 
targetNamespace = "http://tempuri. org/Ex9_17.xsd" 
elementForm Default = "qualified" 
xmlns = "http://tempuri. org/Ex9_17. xsd" 
xmlns:mstns = "http://tempuri. org/Ex9_17. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema"> 
<xs:element name = "note"> 
<xs:complexType> 
<xs:sequence> 
<xs:element name = "to" type = "xs:string"/> 
<xs:element name = "from" type = "xs:string"/> 
<xs:element name = "heading" type = "xs:string"/> 
<xs:element name = "body" type = "xs:string"/> 
</xs:sequence> 
</xs:complexType> 
</xs:element > 
</xs: schema > 


9.5.5 sequence 


sequence 要 求 组 中 的 元 素 以 指定 的 顺序 出 现在 包含 元 素 中 。 
【语法 】 


< sequence 

id = JID 

maxOccurs = (nonNegativeInteger | unbounded): 1 

minOccurs = nonNegativeInteger: 1 

{any attributes with non - schema Namespace}...> 
Content: (annotation?, (element | group | choice | sequence | any) * ) 
</sequence> 
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【 例 9-16】 说 明 一 个 元 素 (zooAnimals) 在 sequence 元 素 中 可 以 包含 下 列 元 素 的 零 个 
或 多 个 : elephant bear 、giraffe。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,命名 为 Ex9-18. xsd。 

第 2 步 ,在 Ex9-18. xsd 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf - 8"?> 
< xs:schema id= "Ex9_18" 
targetNamespace = "http://tempuri. org/Ex9_18. xsd" 
elementForm Default = "qualified" 
xmlns = "http://tempuri. org/Ex9_18.xsd" 
xmlns:mstns = "http://tempuri. org/Ex9_18. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema"> 
<xs:element name = "zooAnimals"> 
<xs:complexType> 
<xs:sequence minOccurs = "0" maxOccurs = "unbounded"> 
<xs:element name = "elephant"/> 
<xs:element name = "bear"/> 
<xs:element name = "giraffe"/> 
</xs: sequence> 
</xs:complexType> 
</xs:element > 
</xs:schema> 


【 例 9-17】 基于 XML 架构 验证 的 文档 。 
第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 文件 新 项 ,命名 为 Ex9-19. xml。 
第 2 步 ,在 Ex9-19. xml 文件 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf 一 8”?> 
< booklist xmlns:xsi= "http://www. w3. org/2001/XMLSchema - instance" xsi:noNamespaceSchemaLocation 
= "Ex9 — 13.xsd"> 
<book classify= "自然 科学 "> 
<ISBN>7- 201- 123456 - 8 </ISBN> 
<title> Java 教程 </title> 
<authorlist> 
< author > Herber Schildt </author > 
<author> 马 海军 </author > 
</authorlist > 
<price> 64.00</price> 
</book> 
< book classify= "社会 科学 "> 
<ISBN>7-201- 1978</ISBN> 
<title > 投资 学 </title> 
<authorlist> 
<author > 张 中 华 </author > 
<author > 谢 长 城 </author > 
</authorlist > 
<price> 19.00 </price> 
</book> 
</booklist > 
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第 3 步 , 在 XMLWebsite 项 目 中 添加 XML 架构 新 项 ,如 图 9-7 所 示 , 命 名 为 Ex9- 





13, xsd。 
第 4 步 ,在 Ex9-13. xsd 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf — 8"?> 
<xs:schema id = "EX9 13" 
targetNamespace = "http://tempuri. org/EX9_13.xsd" 
elementForm Default = "qualified" 
xmlns = "http://tempuri. org/EX9_13. xsd" 
xmlns:mstns = "http://tempuri. org/EX9_13. xsd" 
xmlns:xs = "http://www. w3. org/2001/XMLSchema" 
> 
<xs:element name = "booklist"> 
<xs:complexType > 
<xs:sequence> 
<xs:element name = "book" maxOccurs = "unbounded"> 
<xs:complexType> 
<xs:sequence> 
<xs:element name 
<xs:element name = "title" type= "xs:string"/> 
<xs:element name = "authorlist" minOccurs = "1"> 
<xs:complexType > 
<xs:sequence> 
<xs:element name = "author" type = "xs:string" maxOccurs 


= "ISBN" type = "xs:string" /> 


="5" /> 


</xs: sequence> 
</xs:complexType > 
</xs:element > 
<xs:element name = "price" type = "xs:decimal"/> 
</xs:sequence> 
<xs:attribute name = "classify" use = "required"> 
<xs:simpleType> 
<xs:restriction base = "xs:string"> 
<xs:enumeration value = "社会 科学 " /> 
<xs:enumeration value = "自然 科学 "/> 
</xs:restriction> 
</xs:simpleType> 
</xs:attribute> 
</xs:complexType> 
</xs:element > 
</xs:sequence> 
</xs:complexType> 
</xs:element > 
</xs: schema > 


9.6 XML 文档 显示 


XML 将 格式 和 数据 分 析 ,单独 的 XML 文档 不 知道 如 何 显示 数据 格式 ,需要 使 用 辅助 
的 文件 才能 实现 数据 显示 。 目 前 在 浏览 器 上 显示 数据 的 主要 方法 是 CSS, 将 来 XML 文档 
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显示 的 主要 文件 类 型 是 可 扩展 样式 语言 (eXtensible Stylesheet Language,XSL)。 此 外 , 数 
据 岛 技术 与 JavaScript 定制 等 方法 也 可 以 显示 XML 的 内 容 。 


9.6.1 基于 CSS 样式 的 XML 文档 显示 


引用 式 是 指 XML 文档 本 身 不 含有 样式 信息 ,通过 引用 外 部 的 CSS 文档 来 定义 文档 的 
表现 形式 。 大 部 分 XML 文档 都 采用 这 种 方式 ,这 和 XML 内 容 与 形式 分 开 的 原则 一 致 。 具 
体 实现 方式 是 ,在 XML 文档 的 开头 部 分 写 一 个 关于 样式 单 的 声明 语句 。 

【语法 】 

<?xml - stylesheet type = "text/CSS" href = "CSSFileName. CSS"?> 


按照 声明 的 语句 指示 ,XML 文档 在 浏览 器 上 的 表现 方式 就 由 样式 文件 CSSFileName. CSS 
所 决定 。 

使 用 CSS 格式 化 XML 不 是 常用 的 方法 ,更 不 能 代表 XML 文档 样式 化 的 未 来 。W3C 
推荐 使 用 基于 XSL 的 XML 文档 显示 。 

【 例 9-18】 使 用 CSS 样式 表 来 格式 化 XML 文档 。 

第 1 步 ,在 XMLWebsite 项目 中 添加 XML 文件 ,命名 为 Ex9-20. xml。 

第 2 步 , 在 Ex9-20. xml 中 添加 如 下 代码 ， 


<?xml version = "1.0" encoding = "utf 一 8"?> 
<?xml - stylesheet type = "text/CSS" href = ”Ex9 - 20. CSS"?> 
< CRTRALOG > 
<CD> 
<TITLE > Empire Burlesque </TITLE > 
< ARTIST > Bob Dylan </ARTIST > 
< COUNTRY > USA </COUNTRY > 
< COMPANY > Columbia </COMPANY > 
< PRICE> 10.90 </PRICE > 
< YEAR> 1985 </YEAR> 
</CD> 
<CD> 
<TITLE > Hide your heart </TITLE > 
< ARTIST > Bonnie Tyler </ARTIST> 
< COUNTRY > UK </COUNTRY > 
< COMPANY > CBS Records </COMPANY > 
< PRICE> 9.90 </PRICE> 
< YEAR> 1988 </YEAR> 
</CD> 


</CATALOG> 


第 3 步 ,在 XMLWebsite 项 目 中 添加 CSS 样式 文件 ,命名 为 Ex9-20. CSS。 
第 4 步 , 在 Ex9-20. CSS 中 添加 如 下 代码 : 


CATALOG 

| 

background — color: #ffffff; 
width: 100%; 
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} 
CD 
{ 
display: block; 
margin 一 bottom: 30pt; 
margin— left: 0; 
} 
TITLE 
{ 
color: #FF0000; 
font ~ size: 20pt; 
} 
ARTIST 
{ 
color: 井 0000FF; 
font - size: 20pt; 
} 
Columbia 


COUNTRY, PRICE, YEAR, COMPANY 10.90 
1985 
{ 


display: block; 
color: #000000; 


Empire Burlesque Bob Dylan 
USA 


Hide your heart Bonnie Tyler 
Uk 


margin - left: 20pt; 
} 


第 5 步 ,用 浏览 器 查看 Ex9-20. xml 文件 ,得 到 如 图 9-8 
所 示 的 显示 结果 。 


9.6.2 基于 XSLT 样式 表 的 XML 文档 显示 


W3C 组 织 于 1999 年 制定 了 XSL, 将 XML 转换 为 一 种 新 的 HTML、 PDF、VRML、 
XHTML 或 SVG 等 文档 ,在 浏览 器 或 其 他 应 用 程序 中 可 以 显示 出 来 。XSL 遵循 XML 文档 
的 规范 ,可 以 对 复杂 的 高 度 结构 化 的 XML 文档 实现 格式 化 ,还 可 以 实现 排序 等 功能 。 

XSL 由 两 个 关键 部 分 构成 : 一 个 是 转换 引擎 ,把 原始 文档 树 转换 为 其 他 文档 树 , 即 树 转 
换 , 以 实现 数据 转换 的 目的 ; 另 一 个 是 格式 化 的 符号 集 , 即 格式 对 象 (Form atted Object， 
FO) ,以 实现 XML 数据 表达 。 

转换 引擎 这 部 分 协议 日 渐 成 熟 , 于 2007 年 形成 正式 的 标准 ,已 从 XSL 中 分 离 出 来 , 称 
为 XSL 转换 (XSL Transformation,XSLT) ,专门 用 于 进行 XML 数据 转换 。 数 据 表达 部 分 
称 为 XSL-FO (XSL Formatting Object) ,目前 还 是 草案 。XSL 是 XSLT 的 前 身 ,现在 有 人 
称 XSL 为 XSLT, 有 人 称 XSL 为 XSL-FO。 

1. XSLT 样式 的 基本 结构 

XML 文档 的 数据 结构 是 树 形 结构 ,无 论 XML 文档 结构 如 何 复 杂 , 它 都 是 由 如 下 7 种 
结 点 构成 的 : 文档 根 结 点 .元素 结 点 、 文 本 结 点 、 属 性 结 点 、 处 理 指令 结 点 、 注 释 结 点 和 命名 
空间 结 点 ,由 这 些 结 点 可 以 构成 一 棵 树 。 事 实 上 可 以 认为 XSLT 是 将 一 棵 XML 树 转 换 为 
另 一 棵 不 同 结构 的 XML 树 。 

使 用 VS 2013 工具 ,新 建 一 个 XSLT 文件 ,如 图 9-9 所 示 ,XSLT 文件 的 默认 代码 如 下 : 
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<?xml version = "1.0" encoding = "utf 一 8"?> 
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSLVTransform " 
xmlns:msxsl = "urn: schemas 一 microsoft ~ com:xslt" 
exclude — result ~ prefixes = "msxsl"> 
<xsl:output method = "xml" indent = "yes"/> 
<xsl:template match="@ * | node()"> 
<xsl:copy> 
<xsl:apply — templates select = "@* | node()"/> 
</xsl:copy> 
</xsl:template> 
</xsl:stylesheet > 








YY 外 | 中 
== 一 二 二 二 
加 二 内 se) -| 
Visual Basic @& WcF 而 各 Visual cr 二 类 型 Visual C# 
Visoalct 本 用 于 转换 XML 文档 的 文件 
联机 © Wr Bs (yan Visual Cr 
VY web ant contreller class Wl) Visual Ce 
Lm Web API 控制 祷 类 (v2] Visual Ce 
:图 web Es (smo Visual Ce 
0 we emt Visual ce 
| 站 xu am Visual cr 
| 可 
加 mx Visual ce 
Visual Ce ~ 
音 南 此 全 机 并 埋 接 检 板 、 
和 名称 (: XSLTFile2xsk 











9-9 新 建 一 个 XSLT 文件 


XSLT 文件 也 是 一 个 XML 文件 ,以 <?xml version 一 "1. 0" encoding 一 "utf-8"?> 开 始 。 
要 将 XML 文档 转换 为 HTML 等 其 他 文档 ,除了 要 进行 转换 的 XML 文件 本 身 之 外 ,还 需 
要 一 个 指定 转换 规则 的 XSLT 文件 ,必须 在 XML 文件 中 指出 对 应 的 XSLT 文件 的 URL。 
在 XML 文件 中 ,必须 在 开头 放置 一 条 处 理 指 令 , 其 格式 为 


<?xml - stylesheet type = "text/xsl" href = "your ~ xsl ~ file— URL"?> 


<xsl:stylesheet > 为 XSL 文件 的 根 结 点 ,必须 声明 XSLT 的 命名 空间 ,为 这 个 空间 指定 
前 缀 。xmlns: xsl 一 "http://www. w3. org/1999/XSLVTransform" 指向 了 W3C 官方 的 
XSLT 命名 空间 。 不 同 命名 空间 在 浏览 器 中 的 结果 可 能 不 一 样 。 

version 一 "1.0" 指 定 XSL 文件 的 版 本 号 。 

< xsl:output method 王 "xml" indent 一 "yes"/> 定 义 输出 文本 的 格式 。 

< xsl:template > 元 素 用 于 构建 模板 .这 是 XSL 的 主要 部 分 。 
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2. XSL 的 模板 元 素 

XSLT 的 转换 规则 由 若干 个 模板 构成 ,每 个 模板 利用 XPath 表达 式 指 定 应 用 的 结 点 , 当 
XML 文档 中 的 结 点 与 指定 的 结 点 匹配 时 ,就 应 用 这 个 模板 。 

模板 定义 的 语法 : 

<xsl:template match = "pattern" name = "template name" > 

人 <! -- 模板 的 内 容 --> 

</xsl:template> 

match 属性 用 于 关联 XML 元 素 和 模板 。match 属性 也 可 用 来 为 整个 文档 定义 模板 。 
pattern 为 XPath 表达 式 , 例 如 : 

/, 与 根 结 点 匹配 。 

* ,与 任何 元 素 和 属性 结 点 匹配 。 

chapter/para, 与 chapter 结 点 的 子 结 点 para 匹配 。 

@id, 与 属性 id 匹配 。 

chapter[L@id 二 "1"], 与 属性 id 的 值 为 1 的 结 点 chapter 匹配 。 

. ,当前 结 点 。 

可 选项 name 属性 是 模板 的 自 定义 名 称 , 只 能 通过 < xsl: call-template > 元 素来 调用 
模板 。 

模板 存放 在 XSLT 文档 中 ,XSLT 处 理 器 将 从 文档 根 结 点 开始 搜索 源 文档 树 中 的 结 点 ， 
一 旦 发 现 某 个 结 点 有 匹配 的 模板 , 则 该 结 点 及 其 子 树 ( 以 该 结 点 为 树 根 的 子 树 ) 就 由 该 模板 
处 理 。 

XSL 的 模板 元 素 的 定义 ,如 


<xsl:template match = "/books/book" > 
<xsl:template match = "/books/book[ @category = “TP312’ ]"> 


方 括号 中 的 布尔 表达 式 称 为 “谓词 ”, 它 表示 一 个 过 滤 条 件 ,只 有 满足 过 滤 条 件 的 结 点 , 才 被 
过 滤 出 来 作为 匹配 结 点 。 

模板 调用 可 以 用 name 调用 模板 和 select 调用 模板 两 种 方式 。 

< xsl:call-template > 元 素 , 按 名 称 调用 模板 。 

【 话 法 】 

<xsl:call - template 

name = QName 

</xsl:call - template> 

使 用 < xsl:call-template > 可 以 调用 命名 的 模板 。 如 果 < xsl:template > 元 素 有 name 属 
性 , 则 可 以 (但 是 不 需要 ) 同 时 有 match 属性 。< xsl:call-template > 元 素 按 名 称 调用 模板 ; 
必须 有 name 属性 ,用 来 标识 要 调用 的 模板 。 与 < xsl: apply-templates > 不 同 ,< xsl: call- 
template > 不 会 更 改 当 前 结 点 或 当前 结 点 列表 。 

【 例 9-19】〗 < xsl:call-template > 的 例子 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 ,命名 为 Ex9-21. xml。 

第 2 步 ,在 Ex9-21. xml 中 添加 如 下 代码 : 
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<?xml version = "1.0"?> 
<?xml - stylesheet type = "text/xsl" href = "Ex9 - 21.xs]l"?> 
< COLLECTION> 
<BOOK> 
< TITLE > Lover Birds </TITLE > 
< AUTHOR > Cynthia Randall </AUTHOR> 
< PUBLISHER > Lucerne Publishing </PUBLISHER > 
</BOOK > 
<BOOK> 
< TITLE > The Sundered Grail </TITLE > 
< AUTHOR > Eva Corets </AUTHOR > 
< PUBLISHER > Lucerne Publishing </PUBLISHER> 
</BOOK > 
<BOOK> 
<TITLE > Splish Splash </TITLE > 
< AUTHOR > Paula Thurman </AUTHOR> 
< PUBLISHER > Scootney </PUBLISHER > 
</BOOK> 
</COLLECTION > 


第 3 步 ,在 XMLWebsite 项 目 中 添加 XSL 样式 表 文 件 , 命 名 为 Ex9-21. xsl。 
第 4 步 ,在 Ex9-21. xsl 中 添加 如 下 代码 : 
<?xml version= "1.0" encoding = "utf — 8"?> 


1.0" xmlns:xsl = "http://www. w3. org/1999/XSL/Transform "> 
> 


<xsl:stylesheet version 
<xsl:template match="/' 
<HIML> 
<head> 
<tiltle> 调用 模板 实例 </tiltle> 
</head> 
<body> 
<xsl:call - template name = "mytemplate"> </xsl:call - template> 
</body> 
</HTML > 
</xsl:template> 
<xsl:template name = "mytemplate" match = "COLLECTION/BOOK" > 
<! -- 循环 处 理 -一 > 
<xsl:for - each select = "COLLECTION/BOOK"> 
TITLE = 
<xsl:value — of select = "TITLE"/> 
<br></br> 
</xsl:for - each> 
</xsl:template> 
</xsl:stylesheet > 


第 5 步 , 用 浏览 器 查看 文件 Ex9-21. xml, 运 行 结果 如 下 : 


TITLE = Lover Birds 
TITLE = The Sundered Grail 
TITLE = Splish Splash 





< xsl:apply-templates > 元 素 ,指示 XSLT 处 理 器 根据 每 个 选 定 结 点 的 类 型 和 上 下 文 找 
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到 适合 应 用 的 模板 。 
【语法 】 


<xsl:apply— templates 
select = "pattern" 
mode = QName 

</xsl:apply - templates > 


【 例 9-20】 < xsl:apply-template > 的 例子 。 
第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 文件 ,命名 为 Ex9-22. xml。 
第 2 步 , 在 Ex9-22. xml 中 添加 如 下 代码 : 


<?xml version = "1.0"?> 
<?xml — stylesheet type = "text/xsl" href = "Ex9 — 22.xsl"?> 
< COLLECTION> 
<BOOK> 
< TITLE> Lover Birds </TITLE > 
< AUTHOR > Cynthia Randall </AUTHOR> 
< PUBLISHER > Lucerne Publishing </PUBLISHER> 
</BOOK > 
<BOOK> 
< TITLE> The Sundered Grail </TITLE > 
< AUTHOR > Eva Corets </AUTHOR> 
< PUBLISHER > Lucerne Publishing </PUBLISHER> 
</BOOK > 
<BOOK> 
< TITLE> Splish Splash </TITLE > 
< AUTHOR > Paula Thurman </AUTHOR> 
< PUBLISHER > Scootney </PUBLISHER> 
</BOOK> 
</COLLECTION > 


第 3 步 ,在 XMLWebsite 项 目 中 添加 XSL 样式 表 文 件 , 命 名 为 Ex9-22. xsl。 
第 4 步 ,在 Ex9-22. xsl 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf 一 8"?> 
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSLVTransform " 
xmlns:msxsl = "urn: Schemas ~ microsoft ~ com:xslt" exclude ~ result - prefixes = "msxsl"> 
<xsl:output method = "xml" indent = "yes"/> 
<xsl:template match = "/"> 
<HIML> 
<head> 
<title> Apply 模板 实例 </title> 
</head> 
< body> 
<xsl:apply — templates select = "COLLECTION"> </xsl:apply— templates > 
</body> 
</HTML > 
</xsl:template> 
<xsl:template match = "COLLECTION" > 
<! -- 循环 处 理 --> 


<xsl:for - each select = ". /BOOK"> 
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<xsl:value— of select = "TITLE"/> 
<br/> 
</xsl:for - each> 
</xsl:template> 
</xsl:stylesheet > 


第 5 步 ,用 浏览 器 查看 文件 Ex9-22. xml, 运 行 结果 如 下 : 


TITLE = Lover Birds 
TITLE = The Sundered Grail 
TITLE = Splish Splash 
3. < xsl: for-each > 元 素 
< xsl:for 一 each > 元 素 可 用 于 选取 指定 的 结 点 集中 的 每 个 XML 元 素 。 
【语法 】 
<Xs1:for - each 
Select = Expression 
</xsl:for - each> 
4. < xsl:value-of > 元 素 
< xsl: value-of select 二 string-expression > 元 素 用 于 提取 某 个 选 定 结 点 的 值 , 并 把 值 添 
加 到 转换 的 输出 流 中 。 
5. < xsl:sort > 元 素 用 于 对 结果 进行 排序 
如 需 对 结果 进行 排序 ,只 要 简单 地 在 XSL 文件 中 的 < xsl:foreach > 元 素 内 部 添加 一 个 
< xsl:sort > 元 素 即 可 。 
【语法 】 
<xsl:sort 
select = string— expression 
lang = { nmtoken } 
data— type = { "text" | "number" | QName} 
order = { "ascending" | "descending" } 
case— order = { "upper -first" | "lower — first" } /> 
select, 结 点 的 排序 关键 字 , 将 指定 结 点 作为 当前 结 点 ,并 将 未 排序 进行 处 理 的 完整 结 点 
列表 作为 当前 结 点 列表 计算 的 表达 式 。 生 成 的 对 象 转换 为 字符 串 ,作为 该 结 点 的 排序 关键 
字 。select 属性 的 默认 值 为 ".”。 这 样 ,当前 结 点 的 字符 串 值 将 作为 排序 关键 字 使 用 。 
lang, 用 于 确定 排序 顺序 的 语言 字母 表 。 如 果 未 指定 lang 值 ,将 根据 系统 环境 确定 


所 
3 


data-type, 字 符 串 的 数据 类 型 。 

order, 字 符 串 的 排序 顺序 ,默认 值 为 ascending。 

case 一 order, 按 大 写字 母 对 字符 串 排序 的 顺序 ,默认 值 为 upper-first, 即 先 按 大 写字 母 
对 字符 串 排 序 。 

【 例 9-21】 < xsl:apply-template > 的 例子 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 ,命名 为 Ex9-23. xml。 

第 2 步 , 在 Ex9-23. xml 中 添加 代码 ,把 Ex9-22. xml 中 的 
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<?xml - stylesheet type = "text/xs1”href = "Ex9 — 22.xs]l"?> 


改 为 


<?xm] — stylesheet type = "text/xs1”href = "Ex9 — 23.xsl"?>, 


其 他 不 变 。 
第 3 步 , 在 XMLWebsite 项 目 中 添加 XSL 样式 表 文件 ,命名 为 Ex9-23. xsl。 
第 4 步 ,在 Ex9-23. xsl 中 添加 代码 ,Ex9-22. xml 中 的 


<xs1:for - each select = ". /BOOK"> 
<xsl:value— of select = "TITLE"/> 


</xsl:for — each> 


改 为 


<xsl:for - each select = "./BOOK" > 
<xsl:sort select = "TITLE" order = "descending"/> 
<xsl:value — of select = "TITLE"/> 

</xsl:for - each> 


第 5 步 ,用 浏览 器 查看 文件 Ex9-23. xml, 运 行 结果 如 下 : 
TITLE = The Sundered Grail TITLE = Splish Splash TITLE = Lover Birds 


6. < xsl:choose > 元 素 
【 话 法 】 
<xsl:choose> 
<xsl:when test = "expression"> 
ae 重出 
</xsl:when> 
<xsl:otherwise> 
</xsl:otherwise> 
</xsl:choose> 


将 按照 从 上 到 下 的 顺序 测试 < xsl:choose > 元 素 的 < xsl: when > 子 级 ,直到 其 中 一 个 元 素 上 
的 test 属性 准确 地 说 明 源 数据 中 的 条 件 ,或 直到 遇 到 < xsl: otherwise > 元 素 。 在 选择 了 
< xsl:when> 或 < xsl:otherwise > 元 素 之 后 ,将 退出 < xsl:choose > 块 。 

对 于 简单 条 件 测试 ,请 使 用 < xsl:if > 元 素 。 

【 例 9-22】 测试 语句 的 例子 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 XML 文件 ,命名 为 Ex9-24. xml。 

第 2 步 ,在 Ex9-24. xml 中 添加 如 下 代码 : 

<?xml version = "1.0" encoding = "utf ~ 8" ?> 

<?xml — stylesheet type = "text/xsl" href = "Ex9— 24.xsl" ?> 

<orders> 

<order> 


< lineitem/> 
< lineitem/> 


第 9 章 XML 编程 


345 





<total >9 </total > 
</order > 
<order> 

< lineitem/> 

< lineitem/> 

< total > 19 </total > 
</order > 
< order > 

< lineitem/> 

< lineitem/> 

< total > 29 </total > 
</order > 

</orders> 


第 3 步 ,在 XMLWebsite 项 目 中 添加 XSL 样式 表 文 件 , 命 名 为 Ex9-24. xsl。 


第 4 步 ,在 Ex9-24. xsl 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf 一 8"?> 


<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSLVTransform " 
xmlns:msxsl = "urn: Schemas — microsoft ~ com:xslt" exclude - result ~ prefixes = "msxsl"> 


<xsl:template match = "order"> 
<xsl:choose> 
<xsl:when test = "total &lt; 10"> 
(small) 
</xsl:when> 
<xsl:when test = "total &lt; 20"> 
(medium) 
</xsl:when> 
<xsl:otherwise> 
(large) 
</xsl:otherwise> 
</xsl:choose> 
<xsl:apply — templates /> 
<BR/> 
</xsl:template> 
</xsl:stylesheet > 


第 5 步 ,用 浏览 器 查看 文件 Ex9-24. xml, 运 
(small) 9 
(medium) 19 


(large) 29 


7. < xsl: 诈 > 元 素 
【语法 】 


<xsl:if test = "expression"> 
“如 果 条 件 成 立 , 则 输出 … 


</xal:if> 


行 结果 如 下 : 
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如 需 添 加 有 条 件 的 测试 , 则 在 XSL 文件 中 的 < xsl:for-each > 元 素 内 部 添加 < xsl:if > 
无 素 。 

【 例 9-23】 测试 语句 例子 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 文件 ,命名 为 Ex9-25. xml。 

第 2 步 ,在 Ex9-25. xml 中 添加 代码 ,把 Ex9-25. xml 中 的 


<?xml — stylesheet type = "text/xsl" href = "Ex9 — 24.xsl" ?> 
改 为 
<?xml - stylesheet type = "text/xsl" href = "Ex9 — 25.xsl" ?> 


第 3 步 ,在 XMLWebsite 项 目 中 添加 XSL 样式 表 文 件 , 命 名 为 Ex9-25. xsl。 
第 4 步 , 在 Ex9-25. xsl 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf 一 8"?> 
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSLVTransform " 
xmlns:msxsl = "urn: Schemas — microsoft - com:Xxslt”exclude - result ~ prefixes = "msxsl"> 
<xsl:template match = "/"> 
<xsl:for - each select = "orders/order"> 
<xsl:if test= "total &lt; 10"> 
<xsl:value- of select = "total" ></xsl:value - of > 
(this one is smaller than 10) 
</xsl:if > 
</xsl:for - each> 
</xsl:template> 
</xsl:stylesheet > 


第 5 步 ,用 浏览 器 查看 文件 Ex9-25. xml, 运 行 结果 如 下 : 
9 (this one is smaller than 10) 


8. XSLT < xsl:output > 元 素 

<xsl:output > 元 素 定 义 了 输出 文档 的 格式 。< xsl: output > 是 顶层 元 素 (top-level 
element) ,必须 是 < xsl: stylesheet > 或 < xsl:transform > 的 子 结 点 。 

【语法 】 


<xsl:output 

method = "xml | HTML | text | name" 
version= "string" 

encoding = "string” 

om 让 一 xml — declaration = "yes|no" 
standalone = "Yes|no" 

doctype 一 public = "string" 
doctype — System = "string" 

cdata - section— elements = "namelist" 
indent = "yes| no" 

media— type = "string"/> 


method 属性 ,标识 用 于 输出 结果 树 的 总 体 方法 。 如 果 没 有 前 级 , 则 标识 此 文档 中 指定 
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的 方法 ,必须 是 xml、html、\text, 或 不 是 NCName 的 限定 名 之 一 。 如 果 有 前 级, 则 展开 并 标 
识 输 出 方法 。 

method 属性 的 默认 值 的 选择 如 下 所 示 。 如 果 下 列 任何 条 件 为 真 , 则 默认 的 输出 方法 为 
HTML。 

结果 树 的 根 结 点 包含 元 素 子 级 。 

结果 树 中 根 结 点 的 第 一 个 元 素 子 级 ( 即 文档 元 素 ) 的 扩展 名 称 包含 本 地 部 分 HTML( 任 
意 大 小 写 组 合 ) 和 空 命名 空间 URI。 

结果 树 中 根 结 点 的 第 一 个 元 素 子 级 之 前 的 任何 文本 结 点 只 包含 空白 字符 。 

否则 ,默认 的 输出 方法 为 xml。 如 果 没 有 < xsl:output > 元 素 或 没有 < xsl:output > 元 素 
指定 method 属性 的 值 , 则 应 使 用 默认 的 输出 方法 。 


9.6.3 基于 数据 岛 的 XML 文档 显示 


XSL 技术 不 是 面向 数据 显示 的 , 它 是 一 种 格式 转换 技术 ,在 显示 手段 和 方式 上 都 不 及 
HTML 丰富 。 而 且 XSL 的 显示 样式 方式 最 终 还 是 利用 了 HTML 模板 进行 显示 ,只 是 中 间 
多 了 一 个 转换 。 因 此 ,理想 的 方案 是 直接 利用 HTML 的 方式 来 显示 XML 数据 。 

XML 数据 岛 是 指 存在 于 HMTL 页 面 中 的 XML 数据 ,就 是 使 用 < XML > 标记 幅 入 
XML 数据 ,在 HTML 文档 中 形成 的 一 个 XML 数据 岛 (Data Island) 。 数 据 岛 是 一 种 数据 
显示 技术 。XML 数据 岛 可 以 减少 数据 库 的 压力 ,主要 是 使 查询 数据 库 的 用 户 不 再 需要 频 
繁 地 访问 服务 器 端的 数据 库 ,而 是 访问 客户 端的 XML 文档 , 既 提 高 了 查询 速度 ,也 减轻 了 
服务 器 端的 负担 。XML 数据 岛 可 利用 客户 端 脚本 实现 动态 信息 交换 。 数 据 岛 技术 不 是 
W3C 的 推荐 标准 , 它 是 微软 的 技术 ,在 IE 5 版 本 以 上 的 浏览 器 中 才 可 使 用 。 

XML 数据 岛 的 使 用 方法 有 两 种 : 一 种 是 在 HTML 中 直接 嵌入 XML; 另 一 种 是 外 部 
引入 XML 数据 。 

第 一 种 方法 ,直接 嵌入 XML 数据 岛 ,将 XML 文档 内 容 直 接 放 在 < xml > 标签 中 。 

【 例 9-24〗 HTML 直接 嵌入 XML 数据 岛 例子 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 HTML 文件 ,命名 为 Ex9-26. HTML。 

第 2 步 ,在 Ex9-26. HTML 中 添加 如 下 代码 : 








<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head > 
< Meta http - equiv = "Content — Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
<xml> 
<?xml version = "1.0" encoding= "utf -8" ?> 
<book> 
<name> Xml 应 用 系列 </name > 
< br/> 
< auhtor > 学 路 的 小 孩 </auhtor > 
<br /> 
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<date>2017- 03 - 23 </date> 
<br /> 
</book> 
</xml > 
</body> 
</HTML > 


第 3 步 , 用 浏览 器 查看 文件 Ex9-26. HTML ,运行 结果 如 下 : 


Xml 应 用 系列 
学 路 的 小 孩 
2017- 03 一 23 


第 二 种 方法 ,外 部 引入 XML 数据 是 通过 指定 < XML > 标签 的 src 属性 来 实现 的 ,通过 
datasrc 和 datafld 属性 将 XML 数据 岛 绑 定 到 HTML 控件 上 。 

【 例 9-25】 外 部 引入 XML 数据 岛 例 子 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 XML 文件 ,命名 为 Ex9-27. xml。 

第 2 步 ,在 Ex9-27. xml 文件 中 添加 如 下 代码 : 


<?xml version = "1.0" encoding = "utf -8" ?> 
<root> 
<stu> 
<name> magicdoom </name > 
<age> 24 </age> 
<email > magicdoom@gmail. com </email > 
</stu> 
<stu> 
<name> Duck </name > 
<age> 22 </age> 
< email > duckm@ gmail. com </email > 
</stu> 
</root> 


第 3 步 ,在 XMLWebsite 项 目 中 添加 HTML 文件 ,命名 为 Ex9-27. HTML，。 
第 4 步 ,在 Ex9-27. HTML 文件 中 添加 如 下 代码 : 


<! DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
<xml id= "island" src = "Ex9—27.xml"></xml> 


</head> 
<body> 
<table width= "100%" datasrc= "#1island"> 
<thead> 
<tr> 


<th> Name </th> 
<th> Age </th> 
<th> Email </th> 
</tr> 
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</thead > 
<tbody> 
<tr> 
<td align = "center">< span datafld= "name"></span></td> 
<td align = "center">< span datafld= "age"></span></td> 
<td align = "center">< span datafld= "email"></span></td> 
ry 
</tbody> 
</table> 
</body> 
</HTML > 


第 5 步 , 用 IE9 浏览 器 可 以 得 到 结果 ,但 是 IE 10 及 其 以 后 的 版 本 都 没有 结果 。 为 了 提 
高 与 HTML 5 的 可 互 操作 性 和 兼容 性 ,IE 10 标准 模式 和 Quirks 模式 中 删除 了 对 “XML 数 
据 岛 "的 支持 。 为 此 ,需要 在 该 页 面 项 部 添加 下 面 的 Meta 标记 设置 兼容 性 : 


<Meta http— equiv= "X- UR- Compatible" content = "IE = EmulateIE9"> 


选择 采用 IE 9 行为 ,才能 得 到 如 图 9-10 所 示 的 结果 。 


Name Age Emal 
mapgicdoor 24 magicdoom@gmail. com 
Duck 22 duckm@email com 


9-10 程序 运行 结果 


【 例 9-26】 ASPX 中 外 部 引入 XML 数据 岛 例 子 。 

第 1 步 , 在 XMLWebsite 项 目 中 添加 Web 窗 体 ,命名 为 Ex9-28. ASPX 。 

第 2 步 , 把 XML 控件 拖 放 到 Web 窗 体 上 ,DocumentSource 属性 设置 为 Ex9-1. xml。 
第 3 步 ,用 浏览 器 查看 文件 Ex9-28. ASPX ,运行 结果 如 下 : 


< 歌曲 集 >< 歌 曲 >< 歌 名 > 康定 情歌 < 作词 > 李 依 若 < 演 唱 者 > 张惠妹 


9.6.4 基于 JavaScript 的 XML 文档 显示 


XML DOM 定义 了 所 有 XML 元 素 的 对 象 和 属性 ,以 及 访问 它们 的 方法 。 解 析 器 
(XML Parser) 把 XML 转换 为 JavaScript 可 访问 的 对 象 。 解 析 器 把 XML 载 入 内 存 , 然 后 
把 它 转 换 为 可 通过 JavaScript 访问 的 XML DOM 对 象 。 

【 例 9-27】 基于 JavaScript 的 XML 文档 显示 。 

第 1 步 ,在 XMLWebsite 项 目 中 添加 HTML 窗 体 ,命名 为 Ex9-29. HTML。 

第 2 步 ,在 Ex9-29. HTML 中 添加 如 下 代码 : 


<!DOCTYPE HTML > 

<HTML xmlns = "http://www. w3. org/1999/xHTML"> 

<head> 

<Meta http~ equiv = "Content - Type" content = "text/HTML; charset = utf -8"/> 
<title></title> 

</head> 

<body> 
<p> 
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<b>name:</b> < span id= "name"></span><br /> 

<b> age:</b> < span id= "age"></span><br /> 

<b> email:</b> < span id = "email"></span> 
</p> 


< script type = "text/javascript"> 
if (window. XMLHttpRequest) {// 适 合 IE 7 + ,Firefox, Chrome, Opera, Safari 浏览 器 的 代码 
xmlhttp = new XMLHttpRequest(); 
else {// 适 合 IE6 和 IE 5 等 浏览 器 的 代码 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" ); 
} 
xmlhttp. open( "GET", "Ex9 ~ 27. xml", false); 
xmlhttp. send( ); 
xmlDoc = xmlhttp.responseXML; 
document. getElementById("name"). innerHTML = 
xmlDoc. getElementsByTagName( "name")[0].childNodes[0].nodeValue; 
document. getElementById("age"). innerHTML = 
xmlDoc. getElementsByTagName( "age")[0].childNodes[0].nodeValue; 
document. getElementById("email"). innerHTML = 
xmlDoc. getElementsByTagName( "email")[0].childNodes[0].nodeValue; 
</script > 
</body> 
</HTML > 


第 3 步 ,用 浏览 器 查看 文件 Ex9-29. HTML ,运行 结果 如 下 : 


name: magicdoom 
age: 24 
email: magicdoom(@gmail. com 


1. 简 述 XMML 的 特点 。 

2. 格式 良好 的 XML 文档 主要 有 哪些 特点 ? 

3. 写 出 用 于 验证 book. XML 文档 的 XML Schema 文档 。 
关于 书籍 信息 的 book. XML 文档 : 


<?xml version = "1.0" encoding = "gb2312"?> 

<book isbn= "0—764- 58007- 8"> 

<title> 三 国 演义 </title> 

<author > 罗贯中 </author > 

< Price> 80.00 </price> 

< resume > 滚滚 长 江东 逝 水 ,浪花 淘 尽 英雄 .是 非 成 败 转 头 空 .青山 依旧 在 , 几 度 夕 阳 红 . 白 发 渔 樵 江 清 
上 , 惯 看 秋月 春风 .一 壶 浊 酒 喜 相 逢 .古今 多 少 事 , 都 付 笑谈 中 . 
</resume> 

< recommendation > 经 典 好 书 </recommendation > 

< publish> 

< publisher > 文艺 出 版 社 </publisher > 
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< pubdate > 1998.10 </pubdate > 
</publish> 
</book> 


4. 对 于 下 列 XML 文档 ,创建 一 个 模式 文档 ,并 应 用 于 给 定 的 XML 文档 。 要 求 如 下 : 
(1) Order 元 素 在 XML 文档 中 可 以 出 现 多 次 ,但 是 至 少 要 出 现 一 次 。 

(2) OrderID 的 值 的 格式 必须 是 AXXX, 其 中 X 为 0 一 9 的 数字 。 

(3) number 的 值 要 为 1 一 99 。 

(4) zip 元 素 的 内 容 的 格式 必须 是 XXXXXX, 其 中 X 为 0 一 9 的 数字 。 

(5) orderID 是 必 选 属性 ,orderDate 是 可 选 属性 。 


<?xml version = "1.0" encoding = "GB2312"?> 

< Orders> 

< Order orderID = "AR001" orderDate = "2009 -1-20"> 
< name > 玩具 </name > 

<number > 10 </number > 

< city> 北 京 </city> 

<zip>100000 </zip> 

</Order > 

< Order orderID = "A002" orderDate = "2009 一 3 一 20"> 
<name > 文具 </name> 

< number > 5 </number > 

<city> 青 岛 </city> 

<zip>266000 </zip> 

</Order > 

</Orders> 


5. 对 于 下 列 XML 文档 ,根据 要 求 ,编写 并 在 XML 文档 上 应 用 对 应 的 XSL 样式 表 。 
(1) 以 表格 的 形式 显示 XML 文档 中 存储 的 所 有 数据 。 
(2) 以 表格 的 形式 显示 orderID 为 A002 的 订单 信息 。 


<?xml version = "1.0" encoding = "GB2312"?> 
<Orders> 

< Order orderID = "A001" orderDate = "2009— 1- 20"> 
<name > 玩具 </name> 

<number > 10 </number > 

<city> 北 京 </city> 

<zip>100000 </zip> 

</Order > 

< Order orderID = "A002" orderDate = "2009 一 3 一 20"> 
<name > 文具 </name> 

<number > 5 </number > 

<city> 青 岛 </city> 

<zip>266000 </zip> 

</Order > 

</Orders> 





Ajax 编程 


Web 应 用 程序 编程 是 一 个 不 断 变化 和 改进 的 主题 。 网 站 可 以 提供 丰富 的 用 户 界 面 , 需 
要 其 响应 能 力 与 Windows 应 用 程序 差不多 。 为 了 提高 响应 能 力 ,Jesse James Garrett 于 
2005 年 2 月 提出 一 种 客户 端 处 理 技术 ( 即 Ajax) 来 实现 。Ajax 的 全 称 为 Asynchronous 
JavaScript and XML( 异 步 JavaScript 和 XML) .是 指 一 种 创建 交互 式 网 页 应 用 的 网 页 开发 
技术 。Ajax 允许 通过 异步 回 送 和 动态 的 客户 端 Web 页 面 处 理 ,改进 Web 应 用 程序 的 用 户 
界面 。 


10.1 Ajax 概述 


Ajax 的 工作 原理 相当 于 在 用 户 和 服务 器 之 间 加 了 一 个 中 间 层 一 一 Ajax 引擎 ,使 用 户 
操作 与 服务 器 响应 异步 化 。 并 不 是 所 有 的 用 户 请 求 都 提交 给 服务 器 , 像 一 些 数据 验证 和 简 
单 的 数据 处 理 等 都 交 给 Ajax 引擎 自己 来 做 ,只 有 确定 需要 从 服务 器 读 取 新 数据 时 ,再 由 
Ajax 引擎 代 向 服务 器 提交 请 求 。 这 样 把 以 前 的 一 些 服务 器 负担 的 工作 转嫁 到 客户 端 ,利于 
闲置 的 客户 端 处 理 器 来 完成 ,减轻 服务 器 和 带宽 的 负担 ,从 而 达到 节约 空间 及 带宽 租用 成 本 
的 目的 。 

Ajax 具有 局 部 刷新 的 特性 。 传 统 的 Web 应 用 允许 用 户 填写 表单 , 当 提交 表单 时 ， 次 向 
Web 服务 器 发 送 一 个 请 求 。 服 务 器 接收 并 处 理 传 来 的 表单 ,然后 返回 一 个 新 的 网 页 。 这 个 
做 法 浪费 了 许多 带宽 ,因为 前 后 两 个 页 面 中 的 大 部 分 HTML 代码 往往 是 相同 的 。 由 于 每 
次 应 用 的 交互 都 需要 向 服务 器 发 送 请 求 , 应 用 的 响应 时 间 就 依赖 于 服务 器 的 响应 时 间 。 这 
导致 了 用 户 界面 的 响应 比 本 地 应 用 慢 得 多 。 在 支持 Ajax 的 Web 应 用 程序 中 ,最 重要 的 特 
性 是 Web 浏览 器 能 在 操作 的 外 部 与 Web 服务 器 通信 ,这 称 为 异步 回 送 或 部 分 页 面 的 回 送 。 
实际 上 ,这 意味 着 用 户 可 以 与 服务 器 端的 功能 和 数据 交互 ,而 无 须 更 新 整个 页 面 。 例 如 , 单 
击 一 个 链接 ,移动 到 表 的 第 二 页 数据 上 时 ,Ajax 只 需要 局 部 刷新 表 的 内 容 , 而 不 刷新 整个 
Web 页 面 。 也 就 是 说 ,需要 的 Internet 通信 量 较 少 ,从 而 使 Web 应 用 程序 的 响应 变 快 。 

Ajax 并 不 是 一 个 新 技术 , 它 只 是 一 个 标准 的 合并 ,以 识别 当前 Web 浏览 器 的 丰富 的 潜 
在 功能 。Ajax 编程 需要 使 用 HTML/XHTML、CSS、DOM、 JavaScript、XMIL 和 
XmlHttpRequest 技术。Ajax 有 不 同 的 技术 实现 ,其 中 ASP. NET Ajax 是 Ajax 的 
Microsoft 实现 方式 。ASP. NET Ajax 专用 于 ASP. NET 开发 人 员 , 可 以 毫 不 费力 地 在 
Web 应 用 程序 中 添加 Ajax 功能 。 自 IE 5 以 来 ,浏览 器 就 把 XmlHttpRequest API 作为 一 
种 在 客户 机 和 服务 器 之 间 进 行 异步 通信 的 方式 。 Wb 应 用 程序 中 进行 从 上 邓 穆 刚 标 准 克 
式 , 是 支持 Ajax 的 Web 应 用 程序 的 一 个 核心 技术 。 这 个 API 的 Microsoft 实现 方式 称 为 
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XMLHTTP, 它 利用 XMLHTTP 通信 。Google 应 该 是 Ajax 最 主要 的 推动 者 , Google 
Map、Gmail 都 在 应 用 Ajax。 


10.2 ASP.NET Ajax 


ASP.NET Ajax 是 Microsoft 公司 的 Ajax 架构 实现 方式 ,专用 于 ASP. NET 开发 人 
员 。ASP. NET Ajax 是 ASP. NET 核心 功能 的 一 部 分 。 网 站 http://ajax. asp. net 上 可 以 
用 于 以 前 的 ASP. NET 版 本 ,包含 相关 的 文档 说 明 、 论 坛 和 示例 代码 ,可 用 于 使 用 的 ASP. 
NET 版 本 。 

ASP. NET Ajax 提供 了 如 下 功能 : 服务 器 端 架 构 允许 ASP. NET Web 页 面 响应 部 分 
页 面 的 回 送 操作 。ASP. NET 服务 器 控件 便于 实现 Ajax 功能 。HTTP 处 理 程序 允许 ASP. 
NET Web 服务 在 部 分 页 面 的 回 送 操作 中 ,使 用 JavaScript Object Notation(JSON ) 串 行 化 
功能 与 客户 端 代码 通信 。Web 服务 支持 客户 端 代码 访问 ASP. NET 应 用 程序 服务 ,包括 身 
份 验 证 和 个 性 化 服务 。 网 站 模板 可 用 于 创建 支持 ASP. NET Ajax 的 Web 应 用 程序 。 客 户 
端的 JavaScript 库 对 JavaScript 语法 进行 了 许多 改进 ,还 提供 了 许多 代码 ,来 简化 Ajax 功 
能 的 实现 。 这 些 服务 器 控件 和 服务 器 端的 架构 统称 为 ASP. NET Extensions。ASP. NET 
Ajax 的 客户 端 部 分 称 为 Ajax 库 。 

还 可 以 从 网 站 http://ajax. asp. net 上 下 载 另 外 两 个 软件 包 : 

ASP. NET Ajax Control Toolkit: 这 个 软件 包 包含 了 由 开发 团体 创建 的 其 他 服务 器 控 
件 。 这 些 控件 是 共享 的 ,可 以 被 查看 和 修改 。 

Microsoft Ajax Library: 这 个 软件 包 包 含 JavaScript 客户 端 架构 ,它们 由 ASP. NET 
Ajax 用 于 执行 Ajax 功能 。 如 果 开 发 的 是 ASP. NET Ajax 应 用 程序 ,就 不 需要 这 个 软件 
包 。 这 个 软件 包 适 用 于 其 他 语言 ,如 PHP, 使 用 与 ASP. NET Ajax 相同 的 代码 基 执行 Ajax 
功能 。 

安装 ASP.NET Ajax 时 ,会 在 GAC 中 安装 两 个 程序 集 : 

System. Web. Extensions. dll: 这 个 程序 集 包 含 ASP. NET Ajax 功能 ,包括 Ajax 扩展 
和 Ajax 库 JavaScript 文件 ,它们 可 以 通过 ScriptManager 组 件 来 获得 。 

System. Web. Extensions. Design. dll: 这 个 程序 集 包 含 用 于 Ajax 扩展 服务 器 控件 的 
ASP.NET Designer 组 件 , 这 些 服 务 器 控件 由 ASP. NET Designer 在 Visual Studio 或 
Visual Web 开发 程序 中 使 用 。 

ASP.NET Ajax 中 的 许多 Ajax 扩展 组 件 都 涉及 支持 部 分 页 面 的 回 送 和 用 于 Web 服 
务 的 JSON 串 行 化 。 这 包括 各 种 HTTP 处 理 程序 组 件 和 对 已 有 ASP. NET 架构 的 扩展 。 
这 些 功 能 都 可 以 通过 网 站 的 Web. config 文件 来 配置 。 还 有 用 4 Ajax 扩 展 
于 其 他 配置 的 类 和 属性 。 但 大 多 数 配 置 都 是 透明 的 ,用 户 很 少 和 


多 ScriptManager 
需要 改变 支持 ASP. NET Ajax 的 网 站 模板 提供 的 默认 设置 。 ey 
与 Ajax 扩展 的 主要 交互 操作 是 使 用 服务 器 控件 将 Ajax ey 

功能 添加 到 Web 应 用 程序 中 。 在 VS 2013 中 有 如 图 10-1 所 可 upasteprogress 


示 的 几 个 服务 器 控件 ,可 以 用 各 种 方式 增强 Web 应 用 程序 。 图 10-1 VS 2013 的 Ajax 
扩展 服务 器 控件 
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1. ScriptManager 控件 

这 个 控件 是 ASP.NET Ajax 功能 的 核心 ,使 用 部 分 页 面 回 送 功能 的 每 个 页 面 都 需要 
它 。 它 的 主要 作用 是 管理 对 Ajax 库 JavaScript 文件 的 客户 端 引 用 ,Ajax 库 JavaScript 文件 
位 于 ASP.NET Ajax 程序 集中 。Ajax 库 主 要 由 Ajax 扩展 服务 器 控件 使 用 ,这 些 控件 会 生 
成 自己 的 客户 端 代 码 。 

这 个 控件 还 负责 配置 要 在 客户 端 代 码 中 访问 的 Web 服务 。 给 ScriptManager 控件 提 
供 Web 服务 的 信息 ,就 可 以 生成 客户 端 类 和 服务 器 端 类 ,来 透明 地 管理 与 Web 服务 的 异步 
通信 。 

还 可 以 使 用 ScriptManager 控件 维护 对 自己 的 JavaScript 文件 的 引用 ,和 Futures CTP 
中 包含 的 其 他 JavaScript 文件 的 引用 。 

2. ScriptManagerProxy 控件 

由 于 ScriptManager 控件 在 一 个 页 面 中 只 能 使 用 一 次 ,如 果 在 模板 页 里 已 经 使 用 了 
ScriptManager 控件 , aspx 内 容 页 面 就 不 能 使 用 ScriptManager 控件 了 ,就 可 以 使 用 
ScriptManagerProxy 控件 。 

3. UpdatePanel 控件 

UpdatePanel 控件 非常 有 用 ,也 许 是 最 常用 的 ASP. NET 控件 。 这 个 控件 与 标准 的 
ASP. NET 占 位 符 类 似 ,可 以 包含 其 他 控件 。 更 重要 的 是 ,在 部 分 页 面 的 回 送 过 程 中 , 它 还 
把 页 面 的 一 个 部 分 标记 为 可 以 独立 于 其 他 页 面部 分 来 更 新 的 区 域 。 

UpdatePanel 控件 包含 的 、 产 生 回 送 操 作 的 任意 控件 (如 按钮 控件 ) ,都 不 会 产生 整个 页 
面 的 回 送 操作 ,它们 只 执行 部 分 页 面 的 回 送 ,只 更 新 UpdatePanel 的 内 容 。 

在 许多 情况 下 ,只 需要 UpdatePanel 控件 实现 Ajax 功能 。 例 如 ,可 以 把 一 个 GridView 
控件 放 在 UpdatePanel 控件 中 ,该 控件 的 分 页 排序 和 其 他 回 送 功能 都 在 部 分 页 面 的 回 送 过 
程 中 发 挥 作 用 。 

4. UpdateProgress 控件 

在 部 分 页 面 的 回 送 过 程 中 ,这 个 控件 可 以 为 用 户 提供 反馈 。 在 更 新 UpdatePanel 时 ,可 
以 为 要 显示 的 UpdateProgress 控件 提供 一 个 模板 。 例 如 ,可 以 使 用 浮 点 数 的 < div > 控件 显 
示 消 息 “Updating…”, 告 诉 用 户 应 用 程序 正在 忙 。 注 意 : 部 分 页 面 的 回 送 不 会 干扰 Web 页 
面 的 其 他 区 域 ,其 他 区 域 仍 可 以 响应 。 

5.Timer 控件 

ASP. NET Ajax 的 Timer 控件 是 使 UpdatePanel 定期 更 新 的 一 种 有 效 方式 。 可 以 把 
这 个 控件 配置 为 定期 触发 回 送 操作 。 如 果 这 个 控件 包含 在 UpdatePanel 控件 中 , 则 每 次 触 
发 Timer 控件 时 ,都 会 更 新 该 UpdatePanel 控件 。Timer 控件 也 有 关联 的 事件 ,所 以 可 以 执 
行 定期 的 服务 器 端 处 理 。 

【 例 10-1】 基于 Ajax 的 实时 天 气 预报 更 新 。 

第 1 步 , 使 用 VS 2013 新 建 一 个 空 网 站 ,并 命名 为 AjaxWebsite, 添 加 一 个 新 的 Web 窗 
体 ,并 命名 为 Ex10-1. aspx。 

第 2 步 , 在 Exl0-1. aspx 页 面 中 添加 1 个 ScriptManager 控件 、1 个 UpdatePanel 容器 
控件 ,在 UpdatePanel 里 面 添加 3 个 TextBox 和 1 个 Button 控件 ,代码 如 下 : 


<%@ Page Language = "C#" AutogventWireup= "true" CodeFile= "Ex10—1.aspx.cs" Inherits= 
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"Ex10_1" %> 
<! DOCTYPE HTML > 
< HTML xmlns = "http://www.w3. org/1999/xHTML"> 
< head runat = "server"> 
<Meta http - equiv = "Content - Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
</head> 
<body> 
< form id = "form 1" runat = "server"> 
<asp:ScriptManager ID = "ScriptManager1" runat = "server"> 
</asp:ScriptManager > 
<asp:UpdatePanel ID = "UpdatePanel1”runat = "server"> 
< ContentTemplate > 
城市 < asp:TextBox ID = "TextBoxl" runat = "server"></asp:TextBox>< br /> 
温度 < asp:TextBox ID = "TextBox2" runat = "server"></asp:TextBox> <br /> 
天 气 < asp:TextBox ID = "TextBox3" runat = "server"></asp:TextBox> <br /> 
<asp:Button ID = "Button1" runat = "server" Text = "获取 数据 " OnClick = "Buttonl_Click" /> 
</ContentTemplate > 
</asp:UpdatePanel > 
</form > 
</body> 
</HTML> 


第 3 步 , 添 加 中 国 气象 局 的 天 气 Web 服务 的 Web 引用: 右键 单 击 AjaxWebsite 项 目 一 
添加 一 服务 引用 ,得 到 如 图 10-2 所 示 的 服务 引用 对 话 框 。 





苦 要 查看 竺 服务 加 上 的 可 用 服务 列表 ,请 蛤 入 服务 URL , 然后 单 去 “ 转 到 ”。 若 要 浏览 可 用 的 又 务 ， 清单 | 
于 “发现” 。 


地 址 (A): 





"oj] | [ga] 


服务 (6): 地 作 (O): 

















ServiceReferencel 


mwa- Ln _jL | 
图 10-2 添加 服务 引用 


第 4 步 ,选择 高 级 按钮 ,得 到 图 10-3 所 示 的 服务 引用 设置 对 话 框 。 添 加 Web 引用 按 
钮 ,得 到 如 图 10-4 所 示 的 添加 Web 引用 对 话 框 。 在 URL 的 对 话 框 中 输入 http://www. 
Webxml. com. cn/ WebServices/WeatherWebService. asmx, 单 击 转 到 后 ,命名 空间 为 
MyWeather。 
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村 富 性 
添加 Web 引用 而 不 是 服务 引用 ， 这 格 基于 ,NET Framework 2.0 Web 服务 技术 生成 代码 





ee 


10-3 ”服务 引用 设置 


请 十 们 现代 Web 服务 的 URL ,多 后 单 而 “天 N03 引用 ” ， 洒 加 位 于 该 URL 上 的 所 有 可 用 服务 
on@xon 


URLU): hapy/wwwwebamlcorcryWebservices/WestherWebServicee » 口 


Webxml.com.cn 天 所 各 机 Web 服务 。 数 每 2.5 小 时 友 右 自 凤 更 新 一 次 。 准 确 可 
息 . 包 名 340 允 个 中 国 主要 搜 亲 和 60 允 个 国外 主要 被 市 三 目 内 的 天 气 更生 数据 - 

站 天 气 到 条 Web Services 六 不 要 用 于 任 休 商 生日 的 。 基 有 本 于 次 隆 天 伯 人。 区 入 技术 
交 坊 。 QQ: 8409035 | 
人 WE 民 刘 证 明 攻 人 失 本 和 ，htrp:/ /ww webxml.com.cn/ 下 玫 大 本 | 


垃 二 下 弄 才 作 ， 有 闪 去 区 定义， 清二 看 慑 务 匡 明 。 


» getSupportCity 
查 调 本 天 气 预 报 Web Services 支 持 的 国内 外 姑 市 或 地 区 信息 


她 入 参数 ，byProvinceName ~ 指证 的 拓 攻 轩 志 的 省 全， 委 为 ALL 攻 宪 于 要 却 进 下 全 
条 雪 市 ， 通 天 数 薄 一 个 一 者 字符 志 数 源 String()， 才 的 为 ， 访 记名 千 ( 过 二 代 玩 ] 








图 10-4 添加 Web 引用 设置 
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其 中 getWeatherbyCityName(theCityName) 方 法 的 输入 参数 如 下 : 

theCityName 一 城市 中 文 名 称 ( 国 外 城市 可 用 英文 ) 或 城市 代码 (不 输入 默认 为 上 海 
市 ) ,如 : 上 海 或 58367, 如 有 城市 名 称 重 复 请 使 用 城市 代码 查询 (可 通过 getSupportCity 或 
getSupportDataSet 获得 ); 

返回 数据 : 一 个 一 维 数组 String(22) ,共有 23 个 元 素 。 

String(0) 到 String(4) : 省 份 ,城市 ,城市 代码 ,城市 图 片 名 称 ,最 后 更 新 时 间 。 

String(5) 到 String(11): 当天 的 气温 ,概况 ,风向 和 风力 ,天 气 趋势 开始 图 片 名 称 (以 下 
称 : 图 标 一 ) ,天 气 趋势 结束 图 片 名 称 ( 以 下 称 : 图 标 二 ) ,现在 的 天 气 实况 ,天 气 和 生活 
指数 。 

String(12) 到 String(16): 第 二 天 的 气温 ,概况 ,风向 和 风力 ,图 标 一 ,图 标 二 。 

String(17) 到 String(21): 第 三 天 的 气温 ,概况 ,风向 和 风力 ,图 标 一 ,图 标 二 。 

String(22) 被 查询 的 城市 或 地 区 的 介绍 。 

第 5 步 ,在 Ex10_1. aspx. cs 文件 中 添加 如 下 代码 : 


using System; 

using System. Collections. Generic; 
using System. Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 


public partial class Ex10_1: System. Web. UI. Page 
{ 
protected void Button1_Click(object sender, EventArgs e) 
{ 
String[ ] xdoc; 
MyWeather. WeatherWebService myw = new MyWeather.WeatherWebService(); 
if(TextBoxl. Text. Length > 0) 
{ 
xdoc = myw.getWeatherbyCityName(TextBoxl. Text. Trim()); 
TextBox2. Text = xdoc[5]; 
TextBox3. Text = xdoc[6]; 
} 


} 


第 6 步 ,运行 程序 ,得 到 如 图 10-5 所 示 的 输入 界面 ,在 城市 对 应 的 文本 框 中 输入 “ 苏 
州 ”, 单 击 “ 获 取 数 据 ” 按 钮 ,得 到 如 图 10-6 所 示 的 结果 。 


城 FE | 城市 
3 认 | 温度 1CR95 | 
| 天 所 7 二 | 


图 10-5 输入 界面 图 10-6 程序 结果 
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10.3 ”基于 XMLHttpRequest 的 Ajax 实现 


XMLHttpRequest 对 象 在 大 部 分 浏览 器 上 已 经 实现 ,而 且 拥 有 一 个 简单 的 接口 ,允许 
数据 从 客户 端 传递 到 服务 端 ,但 并 不 会 打 断 用 户 当 前 的 操作 。 

基于 XMLHttpRequest 的 Ajax 实现 包括 : 

步骤 1, 建立 XMLHttpRequest 对 象 。 

步骤 2, 注册 回调 函数 ,给 XMLHttpRequest 对 象 的 onreadystatechange 属性 赋值 , 指 
出 响应 XMLHttpRequest 对 象 状态 改变 事件 执行 哪个 函数 。 

步骤 3, 使 用 open 方法 设置 和 服务 器 交互 的 基本 信息 。Open 方法 涉及 的 3 个 参数 分 
别 为 : 发 送 请 求 的 方法 (Get 或 Post) .目标 的 URL 地 址 ,是否 异步 请 求 。 

步骤 4, 设置 发 送 的 数据 ,开始 和 服务 器 交互 。 

步骤 5, 在 回调 函数 中 判断 交互 是 否 结束 、 响 应 是 否 正确 ,并 根据 需要 获取 服务 器 端 返 
回 的 数据 ,更 新 页 面 内 容 。 

【 例 10-2】〗 基于 XMLHttpRequest 的 数据 输入 提示 。 

第 1 步 , 在 AjaxWebsite 项 目 上 添加 新 项 HTML 文件 ,命名 为 Ex10-2. HTML。 

第 2 步 ,在 Ex10-2. HTML 文件 中 添加 如 下 代码 : 


<!DOCTYPE HTML > 
< HTML xmlns = "http://www. w3. org/1999/xHTML"> 
<head> 
<Meta http - equiv = "Content ~ Type" content = "text/HTML; charset = utf - 8"/> 
<title></title> 
< script type = "text/javascript"> 
function showHint(str) { 
var xmlhttp; 
// 第 1 步 ,创建 对 象 
if (str. length == 0) { 
document. getElementById("txtHint"). innerHTML = ""; 
return; 
} 
if (window. XMLHttpRequest) { 
xmlhttp = new XMLHttpRequest(); 
} 
else{ 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
// 第 2 步 ,给 XMLHttpRequest 对 象 注册 回调 方法 
xmlhttp. onreadystatechange = function () { 
if (xmlhttp. readyState == 4 && xmlhttp. status == 200) { 
document. getElementById("txtHint"). innerHTML = xmlhttp.responseText; 
} 
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// 第 3 步 ,设置 和 服务 器 交互 的 相应 参数 
xmlhttp. open("GET", "Ex10 — 2.aspx?q=" + str,true); 
// 第 4 步 ,发 送 的 数据 ,开始 和 服务 器 交互 
xmlhttp. send( ); 
} 
</script ></head> 
<body> 


<h3 > 请 在 下 面 的 输入 框 中 键 人 字母 (A - 2): </h3> 

< form action = ""> 

姓氏 : < input type = "text" id = "txt1”onkeyup = "showHint(this. value)" /> 
</form > 

<p> 建 议 : < span id= "txtHint"></span></p> 

</body> 

</HTML > 


第 3 步 , 在 AjaxWebsite 项 目 上 添加 新 项 ASP 文件 ,并 命名 为 Ex10-2. Aspx。 
第 4 步 ,在 Ex10-2. Aspx 文件 中 添加 如 下 代码 : 


using System; 

using System. Collections. Generic; 

using System. Ling; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

public partial class _Default: System. Web. UI. Page 

{ 

protected void Page_Load(object sender, EventArgs e) 

{ 

string[ ] a= new string[31]; 
a[1] = "Anna"; 
a[2] = "Brittany"; 
a[3] = "Cinderella"; 
a[4] = "Diana"; 
a[5] = "Eva”"; 
a[6] = "Fiona"; 
a[7] = "Gunda"; 
a[8] = "Hege"; 





a[9] = "Inga"; 
a[10] = "Johanna"; 
a[11] = "Kitty"; 
a[12] = "Linda"; 
a[13] = "Nina"; 
a[14] = "Ophelia"; 
a[15] = "Petunia"; 
a[16] "Amanda" ; 
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是 


a[17] = "Raquel"; 
a[18] = "Cindy"; 
a[19] = "Doris"; 
a[20] = "Eve"; 
a[21] = "Evita"; 
a[22] = "Sunniva"; 
a[23] = "Tove"; 
a[24] = "Unni"; 
a[25] = "Violet"; 
a[26] = "Liza"; 
a[27] = "Elizabeth"; 
a[28] = "Ellen"; 
a[29] = "Wenche"; 
a[30] = "Vicky"; 
// 获 得 来 自 URL 的 q 参数 
string q = Request. QueryString["q"].ToString().Trim().ToUpper(); 
string hint = ""; 
// 如 果 q 大 于 0, 则 查找 数组 中 的 所 有 提示 
if (q.Length>0 ) 
{ 
hint = ""; 
for(int i=1;i<= 30;i++) 
if (q== a[i].Substring(0,q. Length).ToUpper()) 
{ 
if (hint == "") 
hint = a[i]; 
else 
hint = hint + "," + a[i]; 
} 
} 
// 如 果 未 找到 提示 , 则 输出 "no suggestion" 
// 否 则 输出 正确 的 值 
if (hint == "" ) 
Response. Write( "no suggestion"); 
else 
Response. Write(hint); 
} 
} 


第 5 步 , 运 行程 序 , 得 到 如 图 10-7 所 示 的 结果 。 
请 在 下 面 的 输入 框 中 键入 字母 (A-Z) : 
姓氏 : [ x 


建议 ，Cinderella , Cindy 


10-7 程序 运行 结果 
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10.4 习 题 


1. 简 述 什么 是 Ajax 技术 ,有 何 作用 。 
2. 简 述 ASP.NET Ajax 及 其 主要 控件 。 
3. 分 析 基 于 XMLHttpRequest 实现 Ajax 的 主要 步骤 。 
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